Generador de Box Shadow
Arrossegui els lliscadors per dissenyar una ombra de caixa, acumuli capes per donar profunditat i copiï el CSS resultant a l'instant.
Cada ombra es renderitza al seu navegador. Cap dada que defineixi aquí es puja a BroBroGo.
PMF
Què controlen exactament el desplaçament, el difuminat i l'extensió?
El desplaçament mou l'ombra cap a l'esquerra/dreta i cap amunt/avall, el difuminat en suavitza les vores, i l'extensió la fa créixer o disminuir abans de difuminar-la. Una extensió negativa retreu l'ombra, cosa que és útil per a ombres molt ajustades.
Què fa l'opció d'ombra interior (inset)?
Una ombra normal cau fora de l'element, com la llum darrere d'una targeta elevada. L'opció Inset la inverteix cap a l'interior, de manera que l'element sembla enfonsat; és molt útil per a camps de text o botons premuts.
Per què s'haurien d'acumular diverses capes d'ombra?
Una sola ombra pot semblar plana a partir d'una certa mida. L'elevació real sol combinar una ombra fosca i ajustada amb una altra de més suau i ampla. Afegiu una segona capa i ajusteu-les de manera independent per aconseguir aquest efecte.