Generador de sombra CSS (box-shadow)

Cómo funciona

Escriba el color de la sombra en el panel izquierdo: un solo color en una sola línea, en HEX, RGB o HSL. La mayoría de las sombras de interfaz parten del negro puro — la intensidad se regula con el control de opacidad, no con el color: un 25 % de opacidad se escribe rgba(0, 0, 0, 0.25) en el código. Los desplazamientos horizontal y vertical fijan dónde cae la sombra: dejar 8 píxeles en vertical y cero en horizontal da el efecto natural de luz desde arriba que se usa casi en todas partes. El desenfoque decide la suavidad del borde y la expansión cuánto sobresale la sombra de la caja; una expansión negativa recoge la sombra bajo la caja y crea el efecto discreto de una tarjeta elevada. La opción de dirección convierte la sombra exterior en interior (inset), que hace que la caja parezca hundida en la superficie. El código de la derecha sigue cada cambio — cópielo en su hoja de estilos o descargue la vista previa como PNG de 1200×800 píxeles.

Esta herramienta también se busca como generador box shadow css, sombra css box shadow, sombra para div css, box shadow inset css, codigo sombra css, sombra suave css.

¿Qué es box-shadow?

box-shadow es la propiedad CSS que dibuja una sombra fuera o dentro de una caja HTML. Exige como mínimo un par de desplazamientos y un color; el desenfoque y la expansión son opcionales, y la palabra clave inset lleva la sombra al interior. La sombra nunca cambia el tamaño de la caja ni captura clics — es pura pintura, y por eso es la forma más barata de añadir profundidad sin mover la maquetación. Con comas pueden apilarse varias capas de sombra sobre una misma caja.

¿Qué es rgba()?

rgba() es la notación de color CSS que define un color por sus canales rojo, verde y azul de 0 a 255, más un cuarto parámetro: una opacidad entre 0 y 1. rgba(0, 0, 0, 0.25) significa negro a un cuarto de fuerza — la superficie de debajo sigue viéndose al 75 %. Los colores de sombra usan casi siempre esta forma, porque una sombra natural es translúcida y se mezcla con el fondo sobre el que cae.

¿Cuál es la diferencia entre box-shadow y drop-shadow?

box-shadow dibuja la sombra alrededor de la caja rectangular del elemento: sigue las esquinas redondeadas, pero si el contenido es un PNG transparente o una forma recortada, la sombra cae igualmente como rectángulo. filter: drop-shadow() mira en cambio los píxeles visibles: un logotipo sobre fondo transparente proyecta una sombra que sigue su propio contorno. A cambio, drop-shadow no acepta expansión y no conoce inset — cuando hace falta una sombra interior o una capa expandida, box-shadow es la única opción. La regla práctica: box-shadow para tarjetas y paneles rectangulares, drop-shadow para imágenes recortadas.

La trampa de la sombra dura: equilibrar opacidad y desenfoque

El error más frecuente del principiante es una sombra negra totalmente opaca con poco desenfoque: en lugar de una profundidad suave, la caja recibe un contorno sucio. Las sombras reales son translúcidas y difusas; por eso las sombras de interfaz suelen moverse entre el 10 y el 30 % de opacidad, con un desenfoque de al menos dos o tres veces el desplazamiento. Una sombra de 0 8 24 píxeles se ve natural al 25 % y como una mancha al 100 %.

La segunda trampa es el rendimiento: box-shadow se vuelve a pintar en cada fotograma. Si decenas de cajas de una página con desplazamiento llevan sombras muy desenfocadas, los equipos antiguos pueden trabarse. Aplicar el mismo aspecto a menos cajas, o recortar el desenfoque, baja la carga casi siempre sin diferencia visible.

¿Qué sombra conviene en cada caso?

La sombra no es un adorno sino un lenguaje de elevación: el usuario lee en la sombra qué elemento está encima.

• Tarjetas y paneles → desplazamiento pequeño, desenfoque medio (0 2 8, por ejemplo): levemente elevados
• Menús desplegables y diálogos → desplazamiento y desenfoque grandes (0 12 32): flotan sobre la página
• Botón pulsado, campo de texto → sombra interior (inset): encajados en la superficie
• Resaltado de foco → desplazamiento y desenfoque en cero, expansión de 2-3 píxeles: rodea la caja como un anillo

Preguntas frecuentes

¿Qué significa el orden de los valores de box-shadow?

El orden es fijo: desplazamiento horizontal, desplazamiento vertical, desenfoque, expansión y por último el color. La palabra inset al principio hace caer la sombra dentro de la caja. Esta herramienta escribe siempre los cinco valores en ese orden exacto, para que cada control se reconozca en el código.

¿Puedo apilar varias sombras en una misma caja?

CSS lo permite: las sombras se enumeran separadas por comas y la primera se pinta encima. Esta herramienta genera una sola capa para que el código quede legible; si necesita dos capas, ejecútela dos veces con ajustes distintos y una los valores con una coma.

¿Qué guarda el botón Descargar?

Un PNG de 1200×800 píxeles de la tarjeta de la vista previa — útil para mostrar el aspecto de la sombra en una revisión de diseño. Para el código en sí use el botón de copiar.

¿Por qué el color de la sombra se escribe como rgba?

Porque la transparencia es lo que hace natural una sombra: el último número de rgba es la opacidad entre 0 y 1, y el control de opacidad ajusta exactamente ese valor. Con un color HEX puro la sombra se pintaría totalmente opaca y taparía el fondo por completo.