Softonic

Generador de Sombra de Caja CSS

Paso 1 / 2
Siguiente

Crea una regla box-shadow cada vez: define los desplazamientos horizontal y vertical, el desenfoque, la expansión, el color y el inset opcional, y copia el resultado. Las sombras reales suelen necesitar dos o tres capas, así que genera cada capa por separado y une las reglas con una coma.

Cómo diseñar una sombra de caja

  1. 1

    Define los valores de la sombra

    Desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, expansión y color con opacidad.

  2. 2

    Alterna inset

    Convierte la sombra en inset para obtener una sombra interna, útil para botones presionados y efectos de cavidad.

  3. 3

    Elige el color

    El negro con baja opacidad es el clásico. Las sombras de colores (que coinciden con el tono del elemento, más oscuras) se ven más naturales.

  4. 4

    Copia el CSS

    Copia la regla de sombra individual y pégala en tu hoja de estilos. Para sombras en capas, genera cada capa por separado y une las reglas con una coma.

La sintaxis de box-shadow

box-shadow: <x-offset> <y-offset> <blur> <spread> <colour> [inset];
  • x-offset: positivo = derecha, negativo = izquierda.
  • y-offset: positivo = abajo, negativo = arriba.
  • blur: 0 = borde duro, mayor = más suave. El tamaño visible es aproximadamente 1.5x el desenfoque más allá del elemento.
  • spread: tamaño extra más allá del elemento. Positivo aumenta la sombra; negativo la reduce (útil para halos sutiles).
  • colour: admite cualquier color CSS. rgba(0, 0, 0, 0.15) es lo básico.
  • inset: palabra clave que invierte la sombra dentro del elemento.

Sombras en capas se ven reales

Este generador produce una regla de sombra cada vez; para construir una sombra en capas, genera cada capa por separado y combina las reglas con una coma.

Una sombra con 0 0 40px se ve borrosa. Dos sombras, una pequeña y nítida cerca del elemento y una más grande y suave más lejos, imitan cómo se dispersa la luz real.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.08);

La primera línea da la sombra de contacto ajustada; la segunda la ambiental más suave. Este único patrón cubre el 80% de la UI estilo tarjeta.

Sistemas de elevación

Material Design utiliza 6 niveles de elevación, cada uno con una pila de sombras diferente. Simplificado:

Elevación Sombra
1 (reposo) 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24)
2 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23)
3 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23)
4 (elevada) 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22)
5 (flotante) 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22)

Elige uno por rol de elevación y úsalo de manera consistente.

Sombras de colores se ven más naturales

Sombras de negro puro se ven artificiales porque las sombras reales están teñidas por la superficie debajo de ellas. Prueba:

box-shadow: 0 12px 24px rgba(40, 80, 120, 0.18);
  • un azul grisáceo en lugar de negro puro. En fondos cálidos, usa un tinte más cálido.

Rendimiento

Las sombras de caja se pintan en cada repaint. Sombras grandes y pesadas en muchos elementos pueden ralentizar el desplazamiento. Mitigaciones:

  • Usa transform: translateZ(0) en el elemento para forzar una capa compuesta.
  • Reemplaza sombras complejas con filter: drop-shadow() solo si necesitas que la sombra siga un clip-path (es más lento en general).
  • Limita las sombras en elementos que se vuelven a renderizar con frecuencia.

Inset para estados presionados

.button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.12);
}

Sombras inset simulan un aspecto hundido, el botón parece presionado en la superficie. Combina con un pequeño transform: translateY(1px) hacia abajo para un clic táctil.

Preguntas frecuentes

Generalmente porque el desenfoque es demasiado bajo o la expansión es demasiado alta. Una sombra de borde duro sin desenfoque se ve como un elemento duplicado. Aumenta el desenfoque (20-30px es un punto de partida común) y mantén la expansión en 0 o valores negativos muy pequeños.

Box-shadow sigue el border-box del elemento, incluyendo border-radius, así que las tarjetas redondeadas obtienen sombras redondeadas automáticamente. Para formas de clip-path, box-shadow no sigue el clip; usa filter: drop-shadow() en su lugar.

Desplaza la sombra fuertemente en la dirección elegida y usa una expansión negativa para ocultar el lado opuesto. O usa dos sombras, una visible en el lado objetivo, otra con expansión negativa para “comer” el derrame no deseado.

No hay un límite estricto, pero cada sombra es otro pase de pintura. Tres a cuatro capas es el techo práctico; cualquier cosa más y deberías considerar usar una imagen de fondo o SVG en su lugar.

Herramientas relacionadas

Referencia de la tabla ASCII

Tabla ASCII completa del 0 al 127 con decimal, hex, octal, binario y referencia numérica HTML para cada carácter, incluidos los códigos de control como NUL, LF y DEL.

Referencia de caracteres HTML

Lista buscable de entidades HTML, sus códigos nombrados y numéricos, y una copia con un clic para caracteres y símbolos especiales.

Generador de letras aleatorias

Genera letras aleatorias A-Z. Elige la cantidad, usa mayúsculas, minúsculas o mezcla de ambas, y aplica el resultado en juegos, consignas o clase.

Referencia de atajos de teclado

Busca los atajos predeterminados documentados de VS Code, Chrome y Bash con GNU Readline en macOS, Windows y Linux.

Formateador de JSON

Pega JSON para verlo con sangría de 2 o 4 espacios, minificarlo en una salida compacta o comprobar rápidamente la sintaxis antes de copiar el resultado.

Generador de Paletas de Color

Genera paletas monocromáticas, análogas, complementarias, triádicas o tetrádicas desde un color base HEX y exporta variables CSS listas para copiar.