Generador de sombras CSS
Genera sombras CSS con vista previa
Cómo usar Generador de sombras CSS
Genera CSS box-shadow y text-shadow con controles visuales. Vista previa en vivo. Generador de sombras CSS gratuito online.
¿Para qué se usan las sombras CSS?
Las sombras añaden profundidad, elevación y jerarquía visual a las interfaces. Material Design, las Human Interface Guidelines de Apple y la mayoría de sistemas de diseño modernos usan las sombras sistemáticamente para indicar qué elementos están más cerca del usuario.
- Elevación de tarjetas: Una sombra sutil en un componente de tarjeta lo eleva del fondo, señalando que es una unidad de contenido interactiva o diferenciada. Las sombras más profundas indican mayor elevación —como los botones de acción flotantes en Material Design.
- Sombras de modal y dropdown: Las superposiciones (modales, menús desplegables, tooltips) usan sombras fuertes para indicar que flotan sobre el contenido de la página.
- Indicadores de foco: Las sombras de caja pueden sustituir a los contornos para los estados de foco:
box-shadow: 0 0 0 3px rgba(123,53,245,0.4)crea un anillo de foco visible sin afectar al layout. - Legibilidad del texto: Una text-shadow sutil en texto blanco sobre una imagen garantiza la legibilidad independientemente del contenido de la imagen que hay detrás.
- Neumorfismo: El estilo de diseño neomórfico usa sombras dobles —una sombra clara en un lado y una oscura en el otro— para crear un efecto 3D extruido o encajado.
Sintaxis de box-shadow: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color. Se pueden apilar varias sombras: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05)
Frequently Asked Questions
¿Cuál es la diferencia entre box-shadow y drop-shadow()?
box-shadow se aplica al cuadro rectangular del elemento —no sigue formas irregulares como imágenes PNG con fondos transparentes. La función CSS filter drop-shadow() sigue la forma renderizada real, incluyendo las áreas transparentes. Usa drop-shadow() para iconos e imágenes con transparencia; box-shadow para elementos rectangulares.
¿Qué hace la palabra clave 'inset'?
La palabra clave inset hace que la sombra aparezca dentro del elemento en lugar de fuera. Una sombra inset crea la apariencia de un elemento hundido o presionado —útil para estados de botones pulsados, campos de entrada (efecto de profundidad interior) o elementos de UI neumórficos encajados.
¿Qué es el radio de extensión (spread radius) en box-shadow?
El cuarto valor en box-shadow es el radio de extensión —expande o contrae la sombra. Un valor positivo hace la sombra más grande que el elemento; uno negativo, más pequeña. Establecer offset-x y offset-y en 0 con una extensión positiva crea un efecto de contorno/resplandor uniforme alrededor del elemento.
¿Por qué mi sombra se ve diferente en Safari que en Chrome?
Las diferencias de renderizado de sombras entre navegadores suelen deberse al renderizado de subpíxeles y la corrección gamma. Safari y Chrome usan algoritmos de composición ligeramente diferentes. Para resultados consistentes entre navegadores, usa colores RGBA con valores alfa explícitos y prueba las sombras en ambos motores de renderizado.
¿Cuántas box-shadows puedo apilar?
No hay un límite estricto —puedes apilar múltiples box-shadows con una lista separada por comas. Varias sombras apiladas con diferentes radios de desenfoque y opacidades crean sombras de aspecto más natural que imitan la iluminación del mundo real. Los sistemas de diseño como Material Design definen recetas de sombras multicapa específicas para cada nivel de elevación.
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadow añade una sombra fuera (o dentro con inset) del cuadro —no afecta al layout. outline dibuja una línea fuera del borde —tampoco afecta al layout, comúnmente usado para indicadores de foco. border añade una línea dentro del elemento —sí afecta al layout. filter: drop-shadow() sigue la forma renderizada real del elemento. Para elevación y profundidad de UI: box-shadow. Para anillos de foco: outline o box-shadow. Para sombras de icono: drop-shadow().