Aller au contenu

Générateur d’ombre CSS

Réglez une ombre, vérifiez la boîte et copiez le CSS.

Réglages de l’ombre

Traitement dans le navigateur.

−200 à 200 px.

−200 à 200 px.

0–200 px ; jamais négatif.

−200 à 200 px.

HEX opaque de 3 ou 6 chiffres.

0 transparent, 1 opaque.

Ombre générée

Réglez l’ombre, puis générez le CSS.

Créer une ombre CSS

Créez une seule ombre extérieure ou intérieure et copiez la valeur vérifiée.

  1. Saisissez les décalages X et Y.
  2. Réglez le flou et l’étendue.
  3. Saisissez couleur et opacité.
  4. Choisissez extérieure ou intérieure.
  5. Générez, vérifiez et copiez.

Quatre longueurs

X et Y déplacent l’ombre. Le flou adoucit sans accepter de valeur négative. L’étendue positive agrandit et la négative contracte.

Extérieure et intérieure

inset dessine dans la boîte. L’ombre extérieure ne modifie pas la mise en page.

État confirmé

Modifier ou effacer retire l’aperçu et la valeur à copier.

Limites

  • Une seule couche.
  • Aucun éditeur complet ni animation.

Exemples

12px 12px 24px 0 rgba(0,0,0,.3).

inset 0 4px 8px -2px rgba(0,0,0,.5).

Questions fréquentes

Le flou peut-il être négatif ?

Non, CSS l’interdit.

L’étendue peut-elle être négative ?

Oui, elle contracte l’ombre.