Créer de la profondeur avec les ombres CSS
Ce que fait ce générateur
En CSS, les ombres existent sous deux formes. box-shadow trace une ombre autour du cadre rectangulaire d'un élément — un div, un bouton, une carte — tandis que text-shadow projette l'ombre derrière chaque caractère du texte. Ce générateur propose un éditeur visuel pour les deux : vous réglez au curseur le décalage horizontal et vertical, le flou (blur), l'étalement (spread), la couleur et l'opacité, et l'aperçu se redessine dès qu'une valeur change. Une fois le rendu satisfaisant, le CSS correspondant est écrit, prêt à être copié.
Plutôt que de deviner les pixels à la main, vous façonnez l'ombre sur une boîte, un bouton, une carte ou un titre réels et récupérez la déclaration box-shadow ou text-shadow exacte.
Quand l'utiliser
Optez pour box-shadow quand un élément doit sembler décollé de la page : l'élévation façon Material d'une carte, un menu flottant tout en douceur ou l'aspect enfoncé d'un bouton pressé. text-shadow est l'outil de la typographie : une ombre discrète qui détache un titre d'un fond chargé, ou une lueur colorée derrière le nom d'une marque.
C'est aussi un moyen rapide de reproduire une maquette existante. Chargez un préréglage comme Material, Raised, Floating ou Glow comme point de départ, puis ajustez les décalages et l'opacité jusqu'à ce que l'ombre corresponde au modèle que vous suivez.
Exemple : une box-shadow superposée
Une ombre unique se lit ainsi : box-shadow: 0 4px 6px rgba(0,0,0,0.1); — aucun décalage horizontal, 4px vers le bas, 6px de flou et un noir translucide léger. Pour rendre une vraie profondeur, superposez-en deux : une ombre serrée et foncée près de l'élément, plus une autre plus large et plus douce à distance. En ajoutant une couche, l'outil les relie par une virgule : box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);. Chaque couche conserve ses propres décalages, flou, étalement et couleur.
Détails et cas particuliers
Offset X et Y déplacent l'ombre vers la droite et le bas (les valeurs négatives vont à gauche et en haut), le blur adoucit le contour et le spread agrandit ou réduit l'ombre avant l'application du flou — une propriété que text-shadow ne gère pas. Activer Inset retourne l'ombre vers l'intérieur, ce qui donne leur aspect aux boutons pressés et aux champs de saisie creusés. Gardez les ombres de texte légères : un flou trop marqué ou une forte opacité derrière les lettres nuit à la lisibilité. Une fois satisfait, copiez le CSS d'un clic ou téléchargez-le pour l'insérer directement dans votre feuille de styles.