Generador d'ombres CSS (box-shadow)

Mou els controls i veuràs a l'instant com queda l'ombra d'una caixa, una targeta o un botó. Combina diverses capes per a ombres més realistes o parteix d'un dels exemples, i copia el codi box-shadow per al teu CSS.

Com funciona box-shadow

La propietat box-shadow rep fins a quatre mesures i un color: desplaçament horitzontal i vertical (negatius cap a l'esquerra i cap amunt), desenfocament (0 = vora nítida), extensió (fa més gran o, en negatiu, més petita l'ombra) i el color, normalment negre amb transparència (rgba(0, 0, 0, 0.2)). Amb la paraula inset l'ombra es dibuixa dins de la caixa.

Es poden encadenar diverses ombres separades per comes. Les ombres més realistes combinen una ombra curta i nítida amb una altra de més gran i difusa, com fan Material Design i la majoria de sistemes de disseny.

Trucs amb box-shadow

Una ombra sense desplaçament ni desenfocament i amb extensió (0 0 0 4px) dibuixa un contorn que no ocupa espai, ideal per al focus de botons i camps. El neumorfisme fa servir dues ombres oposades, una de clara i una de fosca, sobre un fons del mateix color que la caixa.

Les ombres no afecten la maquetació ni la mida de l'element, però les molt grans i difuses en molts elements poden alentir el desplaçament als mòbils. Per ombrejar la silueta d'una imatge PNG transparent fes servir filter: drop-shadow(), i per als textos, text-shadow.