Generador de box-shadow CSS
Arrastra los controles deslizantes y copia el CSS.
- Se ejecuta en tu navegador — tu texto no se envía a ningún sitio
- Sin registro, sin cuotas, gratis para usar tantas veces como quieras
Cómo funciona
Box-shadow toma cuatro números y un color en un orden concreto, y la diferencia entre una sombra que da sensación de profundidad y otra que parece una pegatina está por completo en esos números. Ver cómo cambia mientras arrastras es mucho más rápido que adivinar.
Qué significan los cuatro números
En orden: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque y expansión. Los desplazamientos mueven la sombra; el desenfoque suaviza su borde; la expansión la agranda o la reduce antes de desenfocar. Una expansión negativa mete la sombra hacia dentro, y así se consigue una sombra ajustada bajo una tarjeta sin que se escape por los lados.
Cómo conseguir que parezca real
La luz suele venir de arriba, así que un desplazamiento vertical pequeño y positivo sin desplazamiento horizontal resulta natural. Las sombras grandes y muy transparentes transmiten una profundidad suave; las pequeñas, oscuras y nítidas parecen una pegatina recortada. Los objetos reales proyectan sombras más borrosas cuanto más lejos están de la superficie: un desenfoque mayor sugiere un elemento más elevado.
Sombras interiores
Una sombra interior se dibuja dentro del elemento en lugar de fuera, y así se hacen los botones pulsados, los campos de entrada y los paneles hundidos. Se aplican los mismos cuatro números, solo que apuntan hacia dentro.
Varias sombras a la vez
CSS acepta una lista separada por comas, y superponer dos sombras, una ajustada y oscura y otra amplia y tenue, queda bastante mejor que una sola. Este generador produce una; pega tú mismo dos juntas para conseguir el efecto de capas.
Generador de CSS box-shadow: preguntas
¿En qué orden van los valores?
Desplazamiento horizontal, desplazamiento vertical, desenfoque, expansión y luego color.
¿Qué hace una expansión negativa?
Reduce la sombra antes de desenfocarla, lo que la mantiene ajustada bajo el elemento en lugar de desbordarse por los lados.
¿Qué es una sombra interior?
Una que se dibuja dentro del elemento en lugar de fuera; se usa en botones pulsados y campos de entrada.
¿Puedo hacer una sombra en capas?
No directamente. CSS acepta una lista separada por comas, así que genera dos y pégalas juntas.