Générateur d'Ombres

Générateur CSS Box Shadow - Créer des Effets d'Ombre Impressionnants

Un puissant générateur CSS box-shadow qui crée de beaux effets d'ombre avec aperçu en direct. Fonctionnalités incluent couches d'ombre multiples, valeurs personnalisables de blur, spread et offset, contrôle d'opacité et styles préréglés.

Qu'est-ce que CSS box-shadow ?

CSS box-shadow est une propriété qui ajoute des effets d'ombre autour du cadre d'un élément. Elle crée profondeur et intérêt visuel dans le design web.

Syntaxe :
box-shadow: offset-x offset-y blur spread color;

Composants :
- offset-x : Position horizontale de l'ombre
- offset-y : Position verticale de l'ombre
- blur : Rayon de flou (douceur)
- spread : Expansion de la taille de l'ombre
- color : Couleur de l'ombre (supporte rgba)
- inset : Mot-clé optionnel pour ombre intérieure

Exemple :
box-shadow: 10px 10px 20px rgba(0,0,0,0.3);

Avantages :
- Pas besoin d'images
- Accéléré matériellement
- Supporte ombres multiples
- Animable avec transitions CSS

Comment créer plusieurs couches d'ombre ?

Plusieurs ombres créent profondeur et réalisme :

Méthode :
1. Cliquez sur 'Ajouter Ombre'
2. Configurez chaque couche séparément
3. Les couches s'empilent dans l'ordre

Exemple CSS :
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1),
0 16px 32px rgba(0,0,0,0.1);

Conseils pour ombres en couches :
- Utilisez opacité décroissante
- Augmentez blur avec distance
- Gardez couleurs cohérentes
- 2-4 couches suffisent généralement

Techniques populaires :
- Ombres d'élévation (Material Design)
- Soft UI (Neumorphisme)
- Effets de lueur
- Illusion de profondeur 3D

Quelle est la différence entre blur et spread ?

Blur et spread contrôlent différents aspects :

Rayon de Blur :
- Contrôle douceur de l'ombre
- Valeur haute = bords plus doux
- 0 = ombre nette
- Affecte gradient de l'ombre
- Ajustement le plus courant

Rayon de Spread :
- Contrôle taille de l'ombre
- Positif = ombre plus grande
- Négatif = ombre plus petite
- 0 = même taille que l'élément
- Étend/contracte uniformément

Exemples :
Ombre nette : blur: 0, spread: 0
Ombre douce : blur: 20px, spread: 0
Effet lueur : blur: 20px, spread: 5px
Flottant : blur: 40px, spread: -10px

Quand utiliser les ombres inset ?

Les ombres inset apparaissent à l'intérieur de l'élément :

Cas d'utilisation :
- États de bouton pressé
- Style de champs de saisie
- Design Neumorphisme
- Effets de profondeur intérieure
- Éléments enfoncés

Syntaxe :
box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);

Conseils de design :
- Combinez avec ombre extérieure pour 3D
- Utilisez pour états :active des boutons
- Excellent pour inputs de formulaire
- Crée apparence 'gravée'

Neumorphisme :
box-shadow:
inset 5px 5px 10px #d1d1d1,
inset -5px -5px 10px #ffffff;

Comment créer des effets d'ombre populaires ?

Styles d'ombre populaires :

Material Design Elevation :
- Ombre 1 : 0 1px 3px rgba(0,0,0,0.12)
- Ombre 2 : 0 1px 2px rgba(0,0,0,0.24)

Carte flottante :
0 20px 40px -10px rgba(0,0,0,0.2)

Lueur Néon :
0 0 20px #ff00ff,
0 0 40px #ff00ff

Ombre douce :
0 10px 30px rgba(0,0,0,0.1)

Ombre dure :
5px 5px 0 #000

Neumorphisme :
box-shadow:
10px 10px 20px #d1d1d1,
-10px -10px 20px #ffffff;

Cet outil inclut ces préréglages pour utilisation rapide !

Fonctionnalités Clés

• Aperçu en direct avec mises à jour instantanées
• Ajuster décalage horizontal et vertical
• Contrôler rayon de blur et spread
• Personnaliser couleur d'ombre et opacité
• Basculer ombres inset/outset
• Ajouter couches d'ombre multiples
• 8 styles d'ombre préréglés
• Personnaliser couleur de boîte et rayon de bordure
• Copier code CSS prêt à l'emploi
• Support couleur RGBA pour transparence
• Préréglages ombre Material Design
• Effets Neumorphisme et lueur
• Traitement 100% côté client