Générateur d'Ombres CSS
Concevez des ombres CSS visuellement avec aperçu en direct. Ajustez le décalage, le flou, l'étalement et la couleur, puis copiez le CSS prêt à l'emploi instantanément.
CSS Box Shadow Generator
Design beautiful shadows and copy the CSS instantly.
Comment utiliser le Générateur d'Ombres CSS
- Ajustez les curseurs de décalage X et Y pour positionner l'ombre par rapport à l'élément.
- Définissez le rayon de flou pour la douceur et le rayon d'étalement pour la taille de l'ombre.
- Choisissez ou tapez une couleur d'ombre en utilisant n'importe quelle valeur CSS valide (hex, rgba, hsla).
- Activez ombre intérieure pour les effets d'ombre interne.
- Copiez le CSS box-shadow généré et collez-le directement dans votre feuille de style.
À propos des Ombres CSS
Les ombres ajoutent de la profondeur et une hiérarchie visuelle aux éléments d'interface. C'est l'une des propriétés CSS les plus utilisées dans le design web moderne, appliquée aux cartes, boutons, modales et barres de navigation.
Ce générateur offre un contrôle visuel complet — chaque ajustement de curseur met à jour l'aperçu en direct instantanément pour que vous puissiez affiner l'apparence exacte avant de copier le code. Le CSS généré utilise la syntaxe box-shadow standard et fonctionne dans tous les navigateurs modernes.
Questions fréquentes
Que fait le rayon d'étalement ? ▼
Le rayon d'étalement contrôle jusqu'où l'ombre s'étend au-delà ou à l'intérieur de l'élément. Les valeurs positives l'étendent vers l'extérieur, les négatives la rétrécissent vers l'intérieur.
Qu'est-ce qu'une ombre intérieure ? ▼
Une ombre intérieure s'affiche à l'intérieur des limites de l'élément plutôt qu'à l'extérieur. Elle est couramment utilisée pour les effets de bouton enfoncé ou de profondeur interne.
Puis-je utiliser des valeurs rgba pour la couleur de l'ombre ? ▼
Oui. Vous pouvez taper n'importe quelle valeur de couleur CSS valide, y compris rgba, hsla, codes hexadécimaux ou noms de couleurs.
Le CSS est-il prêt pour la production ? ▼
Oui. Le CSS généré utilise la syntaxe box-shadow standard compatible avec tous les navigateurs modernes.