Generador de box-shadow CSS en línia i gratuït

Q: Com faig una ombra interior?

Afegeix inset al principi: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);. És útil per a camps de formulari o botons premuts.

Q: Per què l'ombra del meu PNG transparent surt quadrada?

Perquè box-shadow segueix la caixa de l'element, no el dibuix. Perquè segueixi la silueta, fes servir filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)).

Com funciona box-shadow

La propietat box-shadow dibuixa una o diverses ombres al voltant de la caixa d'un element. Cada ombra s'escriu en aquest ordre:

box-shadow: [inset] desplaçament-x desplaçament-y [desenfocament] [expansió] color;

Desplaçament horitzontal i vertical: quant es mou l'ombra cap a la dreta i cap avall. Amb valors negatius va a l'esquerra o cap amunt.
Desenfocament: com més gran, més difuminada la vora. Amb 0 l'ombra té la vora nítida.
Expansió: engrandeix o encongeix l'ombra abans de desenfocar-la. Un valor negatiu la fica per sota de l'element.
Color: gairebé sempre negre o el color del fons amb poca opacitat, per exemple rgba(0, 0, 0, 0.2).
inset: l'ombra va per dins de l'element, com si estigués enfonsat.

Diverses ombres en un mateix element

Les ombres se separen amb comes i la primera queda per sobre de les altres. Combinar una ombra curta i marcada amb una altra d'àmplia i suau dona un resultat molt més natural que una sola ombra fosca: és el que fan els exemples Elevada i Per capes.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.12);

Ombres en imatges: box-shadow o drop-shadow

box-shadow segueix la forma de la caixa, inclòs el seu border-radius, així que és el que necessites per a fotos i targetes. Si la imatge és un PNG o un SVG amb fons transparent i vols que l'ombra segueixi el contorn del dibuix, fes servir el filtre drop-shadow():

img.logo { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }

drop-shadow() no admet expansió ni inset, i no es pot combinar amb diverses capes separades per comes.

Consells

Fes servir opacitats baixes (entre 0,05 i 0,25): una ombra negra al 50 % gairebé mai no queda bé.
Per a una ombra només per sota, combina desplaçament vertical amb expansió negativa: 0 8px 6px -6px.
En mode fosc les ombres amb prou feines es veuen: una vora subtil o un fons una mica més clar funcionen millor.
Per animar una ombra, anima l'opacity d'un pseudoelement que la porti, no el mateix box-shadow: és molt més fluid.

Preguntes freqüents

Què és box-shadow en CSS?

És la propietat que afegeix ombres a la caixa d'un element. Admet desplaçament, desenfocament, expansió, color i la paraula clau inset, i s'hi poden aplicar diverses ombres separades per comes. Funciona a tots els navegadors actuals sense prefixos.

Com poso una ombra només a la part de sota?

Fes servir un desplaçament vertical positiu i una expansió negativa de l'ordre del desenfocament, perquè l'ombra no surti pels costats: box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3);

Com faig una ombra interior?

Afegeix inset al principi: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.2);. És útil per a camps de formulari o botons premuts.

Es poden posar diverses ombres alhora?

Sí, separant-les amb comes. La primera de la llista es pinta per sobre. En aquest generador, cada ombra és una capa.

Per què l'ombra del meu PNG transparent surt quadrada?

Perquè box-shadow segueix la caixa de l'element, no el dibuix. Perquè segueixi la silueta, fes servir filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)).

box-shadow afecta el rendiment?

Una ombra estàtica gairebé no costa res. El que pesa és animar-la o fer servir desenfocaments molt grans en molts elements, perquè obliga a repintar. Per a animacions, canvia l'opacitat d'un pseudoelement amb l'ombra.

Generador de box-shadow

Codi CSS

Com funciona box-shadow

Diverses ombres en un mateix element

Ombres en imatges: box-shadow o drop-shadow

Consells

Preguntes freqüents

Més eines