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.
Outils connexes
Générateur de Dégradés CSS
Créez de beaux dégradés CSS visuellement. Choisissez le type linéaire, radial ou conique, ajoutez des arrêts de couleur, ajustez l'angle et obtenez un aperçu en direct. Copiez le CSS en un clic.
Générateur de Glassmorphisme
Générez des effets CSS de glassmorphisme avec contrôles de flou et de transparence. Aperçu en direct et CSS prêt à copier pour des designs de verre dépoli.
Générateur de Triangles CSS
Créez des triangles CSS purs avec la technique du border hack. Choisissez la direction, la taille et la couleur avec aperçu et CSS prêt à copier.