Aller au contenu principal
PromoteurProcessado no seu navegador

Générateur Box Shadow CSS

Créez visuellement des ombres CSS avec aperçu en temps réel.

0 sur 3 utilisations aujourd'hui · 3 restantes. Passez à Pro et supprimez la limite.

Mettre à niveau
Couches
1/6
Exportation
CSS3
Traitement
Traitement sur l'appareil
01

Aperçu en direct

Résultat CSS
box-shadow: 0px 30px 60px -15px #4f46e566;
02

Couches (1/6)

1
Décalage X0px
Décalage Y30px
Flou60px
Étalement-15px
Opacité40%

§ Comment utiliser

Comment générer une ombre CSS (box-shadow) visuellement

Créez des ombres de toute profondeur (subtile à spectaculaire) avec un aperçu en direct et un code prêt à copier.

  1. Réglez les décalages

    X (horizontal), Y (vertical), Flou (douceur) et Étendue (épaisseur). Glissez les curseurs pour un retour visuel instantané.

  2. Choisissez la couleur de l'ombre

    Par défaut noir à faible opacité (ombre naturelle). Pour un « glow » coloré, choisissez la couleur de votre marque.

  3. Empilez plusieurs couches (facultatif)

    Les ombres pro utilisent 2-3 couches (une ombre proche plus une ambiante). Empilez-les pour une vraie profondeur.

  4. Copiez le CSS

    Prêt à coller. Inclut un inset facultatif (ombre interne) et des préfixes cross-browser.

Connexes

Outils similaires

Da mesma categoria.