Box shadow CSS : générateur d'ombre portée

Une ombre portée réglée à l'œil, un code CSS prêt à coller

Ce générateur d'ombre CSS dessine votre ombre sur une forme d'aperçu et écrit le code en même temps. Vous empilez jusqu'à 8 ombres et copiez une déclaration box-shadow propre. Deux onglets font de même pour text-shadow et filter: drop-shadow(). Tout reste dans votre navigateur : rien n'est envoyé.

Comment créer une ombre CSS

1. Choisissez l'onglet : « box-shadow » pour une carte ou un bouton, « text-shadow » pour un titre, « filter: drop-shadow() » pour une image transparente.
2. Réglez chaque ombre : « Décalage X (px) », « Décalage Y (px) », « Flou (px) », « Étalement (px) », « Couleur » et « Opacité (%) ». Cochez « Intérieure (inset) » pour une ombre creusée.
3. « Ajouter une ombre » en crée une autre. Les flèches ↑ et ↓ changent l'ordre, × supprime, la case « Active » retire une ombre du code sans la perdre.
4. Sous « Forme et fond », réglez la taille, le « Rayon des angles (px) » et les couleurs, ou passez en « Fond sombre ».
5. Choisissez rgba() ou « HEX 8 chiffres », cochez « Variables CSS » si besoin, puis « Copier le code ». « Copier le lien » garde vos réglages dans l'adresse.

Huit préréglages servent de point de départ, de « Douce » à « Lueur ».

La propriété box-shadow et sa syntaxe

Au départ, l'outil écrit :

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

• Décalage X : vers la droite si positif, vers la gauche si négatif. Ici 0.
• Décalage Y : vers le bas si positif. Ici 4px, la lumière vient d'en haut.
• Flou : la largeur du fondu. 0 donne un bord net ; il ne peut pas être négatif.
• Étalement : agrandit l'ombre (positif) ou la rétrécit (négatif). Absent, il vaut 0.
• Couleur : ici du noir à 15 % d'opacité. En HEX 8 chiffres, la même couleur s'écrit #00000026 : les deux derniers chiffres codent l'opacité, 38 sur 255.

L'outil omet un étalement nul, et un flou nul s'il n'est pas suivi d'un étalement : 0 0 0 2px #1f5fe0 garde son flou à 0, sinon le 2px serait lu comme un flou.

Ombres multiples et inset

Les ombres se séparent par des virgules ; la première est dessinée au-dessus. Le préréglage « Superposée » empile cinq ombres de 1, 2, 4, 8 et 16 px à 7 % : plus naturel qu'une seule grande ombre. Le mot inset place l'ombre à l'intérieur de la boîte, comme un champ enfoncé.

text-shadow et drop-shadow

text-shadow suit la forme des lettres, sans étalement ni inset. filter: drop-shadow() ombre les pixels visibles : sur une image <img> en PNG transparent ou sur un SVG, l'ombre épouse le dessin, alors que box-shadow ombre le rectangle entier. L'aperçu montre les deux étoiles côte à côte.

Bonnes pratiques

• Une seule source de lumière. Gardez le même sens de décalage sur tout le site.
• Des ombres douces et cohérentes. 10 à 25 % d'opacité suffisent souvent. Réutilisez deux ou trois niveaux : « Variables CSS » écrit --shadow-1, --shadow-2…
• Performance. Animer de grandes ombres floues peut ralentir un téléphone modeste ; animer l'opacité d'une ombre fixe est souvent plus fluide.
• Accessibilité. Une ombre ne remplace pas le contraste : un bouton ou un champ doit rester visible sans elle, grâce à une bordure ou un fond assez contrasté.

Questions fréquentes

Pourquoi mon ombre ne se voit pas ?

Vérifiez l'opacité, la case « Active » et la couleur de la page : un noir à 10 % disparaît presque sur fond sombre. Un parent en overflow: hidden coupe aussi l'ombre qui dépasse.

Quelle différence entre rgba et HEX 8 chiffres ?

Aucune pour le navigateur : rgba(0, 0, 0, 0.25) et #00000040 donnent le même noir à 25 %. Gardez le format de votre feuille de style.

Comment faire un effet néomorphisme ?

Deux ombres opposées sur une forme de la couleur de la page. Le préréglage met forme et page en #e4e9f0, avec une ombre foncée en bas à droite (8px 8px) et une blanche en haut à gauche (-8px -8px). Contraste faible : à réserver à la décoration.

Mes réglages sont-ils enregistrés ?

Les derniers réglages restent dans votre navigateur. Pour les ouvrir sur un autre appareil, utilisez « Copier le lien ».