DevTulz Online

Generador CSS Box Shadow

Fons


Què és el CSS Box Shadow?

La propietat CSS box-shadow afegeix efectes d'ombra al voltant del marc d'un element. Les ombres es poden desplaçar, difuminar, estendre, acolorir i establir com a inset (ombra interior). Múltiples ombres separades per comes es poden superposar per aconseguir efectes rics. Aquest generador us permet construir ombres complexes de múltiples capes visualment i copiar el CSS llest per enganxar al porta-retalls.

Com usar el Generador de Box Shadow

  1. Ajusteu els controls lliscants d'Offset X/Y, Blur i Spread per posicionar i donar forma a l'ombra.

  2. Feu clic a la mostra de color per triar un color d'ombra i useu el control lliscant d'Opacity per a la transparència.

  3. Activeu 'Inset' per crear una brillantor interior o un efecte premut.

  4. Feu clic a '+ Afegir capa' per superposar múltiples ombres.

  5. Copieu el CSS generat i enganxeu-lo al vostre full d'estils.

Keywords: generador CSS box shadow, box-shadow CSS, eina d'ombra CSS, CSS drop shadow, ombra interior, ombra multicapa, CSS shadow en línia