Ajoutez votre entrée
La géométrie, la couleur, la transparence et le mode de l’ombre.
Atelier de design
Générateur d’ombres CSS
Concevez une ombre équilibrée et copiez la déclaration CSS exacte.
Confidentialité intégréeVotre travail reste avec vous
Aperçu de l’ombre
box-shadow: 0px 18px 45px -12px rgba(15, 23, 42, 0.28);Votre travail reste privé dans le navigateur pendant l’utilisation de cet outil.
Que fait générateur d’ombres css ?
Composez une ombre CSS avec décalages horizontal et vertical, flou, étalement, couleur, opacité et mode intérieur facultatif. Prévisualisez-la puis copiez la déclaration complète.
- Entrée
- La géométrie, la couleur, la transparence et le mode de l’ombre.
- Résultat
- Une déclaration CSS box-shadow avec aperçu.
- Prix
- Gratuit
- Compte
- Non requis
Comment utiliser générateur d’ombres css
Choisissez les réglages
Concevez une ombre équilibrée et copiez la déclaration CSS exacte.
Enregistrez ou copiez
Une déclaration CSS box-shadow avec aperçu.
Conseil pratique
Les ombres naturelles utilisent souvent une faible opacité et un flou généreux.
Quand utiliser générateur d’ombres css
Régler une légère élévation pour une carte ou un panneau flottant.
Créer une ombre intérieure pour un contrôle enfoncé.
Tester un étalement négatif avec un flou généreux.
Exemple
Un exemple concret avec générateur d’ombres css
- Entrée
- Couleur d’ombre #0F172A.
- Paramètres
- x 0px, y 18px, flou 45px, étalement -12px et opacité 28 %.
- Résultat
- box-shadow: 0px 18px 45px -12px rgba(15, 23, 42, 0.28);
À quoi s’attendre
Fonctionnement
La couleur HEX devient des canaux RGB combinés à l’opacité. Les quatre valeurs géométriques sont sérialisées dans l’ordre de box-shadow et le mode intérieur ajoute inset.
Avant utilisation
Limites et cas particuliers
- Une seule couche est générée ; plusieurs ombres doivent être assemblées manuellement avec des virgules.
- Les commandes restent dans les limites affichées et ne simulent pas tous les contextes de fond.
Questions fréquentes
Questions sur Générateur d’ombres CSS
générateur d’ombres css est-il gratuit ?
Oui. Générateur d’ombres CSS est gratuit.
générateur d’ombres css garde-t-il mon travail privé ?
Oui. Votre travail reste privé pendant l’utilisation de l’outil ; rien de ce que vous saisissez n’est envoyé.
Que fait un étalement négatif ?
Il réduit la forme de départ de l’ombre avant le flou et peut garder une ombre douce près de l’élément.
Puis-je générer plusieurs ombres ?
Pas directement. Copiez plusieurs valeurs, puis réunissez-les avec des virgules dans votre CSS.