Generador CSS Box Shadow
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
-
Ajusteu els controls lliscants d'Offset X/Y, Blur i Spread per posicionar i donar forma a l'ombra.
-
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.
-
Activeu 'Inset' per crear una brillantor interior o un efecte premut.
-
Feu clic a '+ Afegir capa' per superposar múltiples ombres.
-
Copieu el CSS generat i enganxeu-lo al vostre full d'estils.
Preguntes Freqüents
Quina és la diferència entre box-shadow i el filtre drop-shadow? box-shadow afegeix ombres al voltant de la caixa de vora rectangular de l'element i admet ombres insertes. El filtre CSS: drop-shadow() s'aplica a la forma visual de l'element (inclosa la transparència), fent que segueixi contorns no rectangulars com PNGs amb fons transparents.
Com creo un efecte d'elevació de targeta de Material Design? Apileu dues ombres de caixa: una ombra ambiental suau (gran desenfocat, baixa opacitat, lleugerament estesa) i una ombra clau (desenfocat més petit, opacitat més alta, desplaçament direccional). Per exemple: 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).
Afecta box-shadow el disseny de la pàgina? No. box-shadow no afecta la mida ni la posició de l'element al flux del document. A diferència de l'outline, no ocupa espai de disseny i no desplaçarà altres elements.
Puc animar box-shadow? Sí. box-shadow és animable amb transicions i animacions CSS. Per al rendiment, preferiu transicionar box-shadow només quan sigui necessari — els navegadors no poden accelerar els canvis de box-shadow de GPU tan eficientment com transform o opacity.
Keywords: generador CSS box shadow, box-shadow CSS, eina d'ombra CSS, CSS drop shadow, ombra interior, ombra multicapa, CSS shadow en línia