Generador de sombras CSS

Por qué una sombra de una sola capa se ve barata

El box-shadow de manual —un desplazamiento, un desenfoque y un negro al 20 %— produce una mancha uniforme que no se parece a ninguna sombra real. En el mundo físico la luz deja dos cosas a la vez: un contacto pequeño y oscuro justo debajo del objeto, y una difusión ancha y muy tenue que se desvanece con la distancia. Una sola capa tiene que elegir entre las dos, y siempre elige mal.

La solución es apilar. CSS acepta tantas sombras separadas por comas como quieras, y se pintan en el orden de la lista: la primera queda encima. La receta que aplica el botón Sombra suave son tres capas con desenfoque y opacidad crecientes; el resultado tiene profundidad sin que se note de dónde sale. Empieza por ahí y luego mueve los valores.

Desenfoque y extensión no son lo mismo

El desenfoque difumina el borde de la sombra, pero no cambia su tamaño de partida: la silueta sigue siendo la del elemento. La extensión sí lo cambia — agranda o encoge esa silueta antes de difuminarla. Por eso una extensión negativa es el truco que más cambia el resultado: recoge la sombra hacia dentro para que no asome por los costados y solo se vea caer hacia abajo, que es exactamente lo que hace un objeto apoyado sobre una superficie.

Regla práctica: si la sombra se ve como un halo alrededor de la caja, baja la extensión antes que la opacidad. Si se ve como un borde duro, sube el desenfoque.

Sombras interiores (inset) y cuándo sirven

Con la palabra clave inset la sombra se dibuja dentro del elemento en lugar de proyectarse fuera. Sirve para lo contrario que una sombra normal: en vez de elevar, hunde. Campos de formulario, barras de progreso, casillas marcadas, un hueco donde encaja una pieza o el borde interior de una sección con textura.

Ojo con la dirección: en una sombra interior, un desplazamiento positivo en Y oscurece el borde superior, no el inferior. Es la parte que despista la primera vez, y se entiende en dos segundos moviendo el control con el interruptor activado.

Sombras en texto sin arruinar la legibilidad

text-shadow es más corto: desplazamiento, desenfoque y color, sin extensión ni inset. Y es mucho menos indulgente, porque cualquier exceso se come el contorno de las letras. Uno o dos píxeles de desplazamiento, poco desenfoque y opacidad baja bastan para despegar un titular de un fondo con ruido.

Si el texto va sobre una foto, una sombra amplia y muy tenue del mismo tono oscuro del fondo funciona mejor que un contorno duro. Y antes de dar el tema por bueno, comprueba el contraste real entre texto y fondo en colores en vivo: la sombra ayuda a separar, pero no arregla un color que ya nace por debajo del mínimo. El porqué del 4.5:1 está contado en la guía de teoría del color.

Preguntas frecuentes

¿Por qué mis sombras se ven falsas o duras?

Porque una sola capa concentra todo el peso de la sombra en un único desenfoque. La luz real produce un contacto pequeño y marcado junto al objeto, más una difusión amplia y tenue que se pierde con la distancia. Apilar dos o tres sombras, una corta y densa y otra larga y suave, reproduce ese comportamiento: es justo lo que aplica el botón «Sombra suave».

¿Qué diferencia hay entre el desenfoque y la extensión?

El desenfoque difumina el borde de la sombra sin cambiar su tamaño de partida. La extensión agranda o encoge la silueta antes de difuminarla: con valores positivos la sombra sobresale por todos lados y con valores negativos se recoge. Una extensión negativa combinada con un desplazamiento vertical es el truco para que la sombra no asome por los costados y el objeto parezca flotar.

¿Cuándo conviene usar una sombra interior (inset)?

Cuando quieres que algo parezca hundido en vez de elevado: campos de formulario, barras de progreso, casillas marcadas, huecos donde encaja una pieza o el borde interior de un contenedor. Con inset la sombra se dibuja dentro del elemento, así que un desplazamiento positivo en Y oscurece el borde superior, al revés de lo que ocurre con una sombra normal.

¿Cómo pongo sombra a un texto sin arruinar la legibilidad?

Con desplazamientos de uno o dos píxeles, poco desenfoque y opacidad baja. La propiedad text-shadow no admite extensión ni inset, solo desplazamiento, desenfoque y color. Si el texto va sobre una foto, funciona mejor una sombra amplia y muy tenue del mismo tono oscuro del fondo, o una capa de color semitransparente detrás del texto, que un contorno duro alrededor de cada letra.