¿Cómo funciona box-shadow?
La propiedad box-shadow dibuja una o varias sombras alrededor de un elemento. Cada sombra se define con un desplazamiento horizontal y vertical, un desenfoque, una extensión (spread) y un color, y opcionalmente con la palabra inset para que la sombra quede dentro del elemento. Escribirla a mano es fácil; conseguir una sombra que parezca natural, no tanto, porque hay que probar muchas combinaciones de valores hasta dar con la buena.
El truco de las sombras realistas es combinar varias capas: una sombra cercana, nítida y oscura que marca el contacto, y otra más amplia, difusa y suave que da profundidad. Este generador te permite añadir tantas capas como quieras y ajustar en cada una el desplazamiento X e Y, el desenfoque, la extensión, el color, la opacidad y si es interior.
La vista previa muestra la sombra sobre una caja en la que puedes cambiar el color de fondo y el de la propia caja, para comprobar cómo queda en tu diseño real y no solo sobre un fondo blanco, ya sea en modo claro u oscuro. Si quieres un punto de partida, tienes presets: suave, elevada, nítida, interior y un estilo similar a neumorfismo. Un detalle que marca la diferencia: las sombras con un color oscuro y poca opacidad suelen verse más naturales que las de negro puro, y un desplazamiento vertical mayor que el horizontal imita la luz que viene de arriba.
El generador funciona en tu navegador y es gratis sin límites: no necesitas ToolStudio Pro para usarlo ni para copiar el CSS.
¿Cómo crear una sombra CSS?
- Empieza con un preset o con la capa por defecto.
- Ajusta el desplazamiento X e Y, el desenfoque, la extensión, el color y la opacidad.
- Añade más capas o marca alguna como inset para una sombra interior.
- Cambia el color del fondo y de la caja para verla en tu contexto.
- Copia el CSS de box-shadow.
Usos habituales
- Tarjetas y paneles con sensación de elevación.
- Botones con sombra que cambia al pasar el ratón.
- Campos de formulario con sombra interior.
- Modales y menús desplegables que flotan sobre la página.
- Interfaces de estilo neumorfismo.
- Anillos de foco accesibles con una sombra sin desenfoque.
Anatomía de un box-shadow
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
Cada capa, separada por comas, sigue el orden desplazamiento X, desplazamiento Y, desenfoque, extensión y color. Una extensión negativa encoge la sombra para que no asome por los lados. Añade inset al principio para que la sombra se dibuje hacia dentro. La primera capa de la lista se pinta encima de las demás.
Preguntas Frecuentes
¿Es gratis?
Sí, es gratis y sin límites. Los generadores CSS de ToolStudio no necesitan Pro: ajusta los valores, mira la vista previa y copia el CSS tantas veces como quieras.
¿Qué diferencia hay entre desenfoque y extensión?
El desenfoque hace que el borde de la sombra sea más difuso. La extensión agranda (valor positivo) o encoge (valor negativo) la sombra antes de desenfocarla.
¿Qué es una sombra inset?
Es una sombra que se dibuja dentro del elemento en lugar de fuera, como si estuviera hundido. Se usa mucho en campos de formulario.
¿Las sombras afectan al rendimiento?
Las sombras con mucho desenfoque en muchos elementos, o animadas, pueden costar al navegador. Para animar una sombra suele ir mejor animar la opacidad de un pseudoelemento que ya la tiene.
¿box-shadow sigue la forma de las esquinas redondeadas?
Sí. La sombra respeta el border-radius del elemento. Puedes diseñar las esquinas con el generador de border-radius.