Comment utiliser Générateur d’ombres CSS
- 1
Choisissez une ombre de départ
Cliquez sur un préréglage comme Douce, Superposée ou Élévation 2, ou ajustez le calque par défaut.
- 2
Façonnez chaque calque
Sélectionnez un calque et réglez son décalage X et Y, son flou, son étendue, sa couleur, son opacité et le mode interne.
- 3
Vérifiez sur votre surface
Modifiez la taille de la boîte, le rayon des coins et les couleurs pour correspondre à l’élément que vous stylisez.
- 4
Copiez le CSS
Copiez la déclaration box-shadow ou la classe Tailwind dans votre code.
Limites et Pro
Gratuit, sans inscription : calques illimités, décalages de −100 à 100 px, flou jusqu’à 200 px et 12 préréglages d’ombre.
Pro supprime les publicités ; l’éditeur d’ombres est complet avec toutes les formules. Découvrir Pro
À propos de Générateur d’ombres CSS
La propriété CSS box-shadow accepte une liste de calques, chacun avec un décalage horizontal et vertical, un rayon de flou, une distance d’étendue, une couleur et le mot-clé facultatif inset. Obtenir une profondeur naturelle demande d’équilibrer tous ces réglages sur deux calques ou plus, ce qui n’est pas simple quand on modifie des nombres dans une feuille de style. Cet éditeur affiche le résultat sur une boîte d’aperçu en direct pendant que vous déplacez les curseurs, puis écrit pour vous la déclaration et une classe Tailwind shadow-[…].
Ajoutez autant de calques que vous voulez, masquez-en un temporairement pour comparer, déplacez-le vers le haut ou vers le bas (le premier calque de la liste est dessiné au-dessus) ou passez-le en mode interne pour des boutons enfoncés et des champs de saisie. Les décalages vont de −100 à 100 pixels, le flou jusqu’à 200 pixels et l’étendue de −100 à 100, et chaque couleur a sa propre opacité. Une étendue négative est l’astuce des ombres douces modernes : elle rentre l’ombre sous l’élément pour ne laisser dépasser qu’une légère lueur en dessous.
La boîte d’aperçu peut être redimensionnée et recevoir n’importe quel rayon de coins, une couleur de boîte et une couleur d’arrière-plan, pour juger l’ombre sur la vraie surface de votre design, y compris les thèmes sombres où les ombres demandent plus d’opacité ou une lueur colorée.
Douze points de départ sont inclus : quatre niveaux d’élévation Material Design, une ombre douce à un calque, une ombre fondue à cinq calques, un décalage dur néo-brutaliste, le néomorphisme, une ombre intérieure, une lueur colorée, un contour de type focus et une carte flottante. Les dégradés se trouvent dans l’autre onglet ; les ombres de texte et le filtre drop-shadow() ne sont pas couverts.
Confidentialité
L’ombre est créée et prévisualisée entièrement dans cette page, et vos calques sont enregistrés uniquement dans le stockage local de ce navigateur pour survivre à un rechargement. Aucun paramètre ni aucune création n’est envoyé à un serveur.