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 !

Comment convertir cette ombre en Tailwind ou React ?

Utilisez le sélecteur de format au-dessus de la zone de code pour basculer entre CSS, Tailwind et React. Le bouton Copier copie le format actif.

Tailwind (valeur arbitraire) :
Tailwind interdit les espaces dans les valeurs arbitraires, donc les espaces à l'intérieur d'une couche deviennent des underscores tandis que les virgules conservent les couches multiples :
shadow-[0_10px_30px_rgba(0,0,0,0.2)]
L'outil génère aussi les classes bg-[...] et rounded-[...] correspondantes.

React / JSX (objet de style en ligne) :
JSX a besoin d'une clé camelCase et d'une valeur chaîne entre guillemets :
style={{ boxShadow: '0 10px 30px rgba(0,0,0,0.2)', backgroundColor: '#ffffff', borderRadius: 8 }}

Les ombres multicouches et inset sont sérialisées correctement dans les trois formats.

Pourquoi mon ombre apparaît-elle différente selon les navigateurs ou sur écran retina ?

De petites différences de rendu sont normales :

- Arrondi sous-pixel : le blur et le spread sont rastérisés différemment selon le moteur. Sur écran retina (2x/3x) une ombre de 1px peut paraître plus douce ; ajustez le blur ou utilisez des offsets en pixels entiers pour rester net.
- Espaces colorimétriques : rgba() est interprété en sRGB partout, préférez donc rgba/hex aux noms de couleur.
- box-shadow vs filter: drop-shadow() : box-shadow suit le border-box rectangulaire de l'élément. Pour les formes non rectangulaires (PNG transparents, clip-path, icônes SVG) utilisez filter: drop-shadow(), qui trace le contour alpha réel.

Accessibilité : les ombres sont décoratives. Ne vous reposez jamais sur une ombre seule pour indiquer un état (focus, erreur) ; associez-la à une bordure ou un changement de couleur visible et gardez un contraste suffisant.

Performance : les grands rayons de flou sont coûteux à repeindre, surtout en animation. Évitez d'animer box-shadow directement sur de grands éléments ; animez l'opacité d'un pseudo-élément ou utilisez will-change: transform uniquement sur les rares éléments qui en ont besoin.

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