Generador de Sombras CSS
Diseña sombras box-shadow visualmente con vista previa en vivo. Ajusta desplazamiento, desenfoque, extensión y color, luego copia el CSS listo para usar al instante.
CSS Box Shadow Generator
Design beautiful shadows and copy the CSS instantly.
Cómo usar el Generador de Sombras CSS
- Ajusta los controles de desplazamiento X e Y para posicionar la sombra respecto al elemento.
- Configura el radio de desenfoque para suavidad y el radio de extensión para el tamaño de la sombra.
- Elige o escribe un color de sombra usando cualquier valor CSS válido (hex, rgba, hsla).
- Activa sombra interior para efectos de sombra interna.
- Copia el CSS box-shadow generado y pégalo directamente en tu hoja de estilos.
Acerca de las Sombras CSS
Las sombras añaden profundidad y jerarquía visual a los elementos de la interfaz. Son una de las propiedades CSS más utilizadas en el diseño web moderno, aplicadas a tarjetas, botones, modales y barras de navegación.
Este generador ofrece control visual completo — cada ajuste de control actualiza la vista previa al instante para que puedas afinar el aspecto exacto antes de copiar el código. El CSS generado usa la sintaxis box-shadow estándar y funciona en todos los navegadores modernos.
Preguntas frecuentes
¿Qué hace el radio de extensión? ▼
El radio de extensión controla hasta dónde se extiende la sombra más allá o dentro del elemento. Los valores positivos la expanden hacia afuera, los negativos la contraen hacia adentro.
¿Qué es una sombra interior? ▼
Una sombra interior se renderiza dentro de los límites del elemento en lugar de fuera. Se usa comúnmente para efectos de botón presionado o profundidad interna.
¿Puedo usar valores rgba para el color de la sombra? ▼
Sí. Puedes escribir cualquier valor de color CSS válido, incluyendo rgba, hsla, códigos hexadecimales o nombres de color.
¿El CSS está listo para producción? ▼
Sí. El CSS generado usa la sintaxis box-shadow estándar compatible con todos los navegadores modernos.
Herramientas relacionadas
Generador de Degradados CSS
Crea hermosos degradados CSS visualmente. Elige tipo lineal, radial o cónico, agrega paradas de color, ajusta el ángulo y obtén una vista previa en vivo. Copia el CSS listo para usar con un clic.
Generador de Glassmorfismo
Genera efectos CSS de glassmorfismo con controles de desenfoque y transparencia. Vista previa en vivo y CSS listo para copiar para diseños de vidrio esmerilado.
Generador de Triángulos CSS
Crea triángulos CSS puros usando la técnica del border hack. Elige dirección, tamaño y color con vista previa y CSS listo para copiar.