Generador de sombras de caja
Generador gratuito en línea de sombras de caja CSS. Diseña sombras hermosas visualmente con vista previa en vivo, múltiples capas y salida CSS instantánea.
Diseña sombras de caja CSS hermosas visualmente con vista previa en vivo.
Copia y pega en tu hoja de estilo.
box-shadow:
0px 4px 6px -1px rgba(0, 0, 0, 0.1);Generador en línea gratuito de sombras CSS — Constructor de sombras visual
Diseña sombras CSS bellas visualmente con vista previa en vivo. Este generador de sombras CSS gratuito admite múltiples capas, preajustes, sombras internas y genera código CSS listo para usar instantáneamente.
¿Qué es un generador de sombras CSS?
Un generador de sombras CSS es una herramienta visual que ayuda a diseñadores web y desarrolladores a crear valores de box-shadow en CSS sin escribir manualmente valores en píxeles. En lugar de adivinar números y recargar tu navegador, ajustas deslizadores y ves el resultado en tiempo real.
La propiedad CSS box-shadow agrega efectos de sombra alrededor del marco de un elemento. Es una de las propiedades CSS más utilizadas para crear profundidad, elevación y jerarquía visual en interfaces web modernas.
Cómo usar este generador de sombras CSS
- Elige un preajuste — Comienza con una sombra sutil, media o fuerte, o empieza desde cero.
- Ajusta los deslizadores — Controla el desplazamiento X, desplazamiento Y, desenfoque, expansión, color y opacidad.
- Activa la opción interna — Cambia entre sombras externas e internas.
- Agrega capas — Apila múltiples sombras para efectos complejos.
- Personaliza la vista previa — Cambia los colores de fondo y caja para que coincidan con tu diseño.
- Copia el CSS — Haz clic en el botón de copiar y pega el código en tu hoja de estilo.
Características clave
| Función | Beneficio |
|---|---|
| Vista previa en vivo | Ve los cambios inmediatamente al ajustar deslizadores |
| 6 preajustes | Comienza rápidamente con estilos de sombra comunes |
| Varias capas | Apila sombras para efectos complejos y realistas |
| Soporte interno | Crea sombras internas para elementos hundidos |
| Selector de color | Control total sobre el color de la sombra |
| Control de opacidad | Ajusta con precisión la transparencia de la sombra |
| Copiar al portapapeles | Exportación de CSS con un solo clic |
Entendiendo la sombra CSS
Sintaxis
La propiedad CSS box-shadow sigue esta sintaxis:
box-shadow: [inset] offsetX offsetY blur spread color;
| Valor | Descripción | Ejemplo |
|---|---|---|
| inset | (Opcional) Hace que la sombra sea interna | inset |
| offsetX | Desplazamiento horizontal — positivo = derecha, negativo = izquierda | 4px |
| offsetY | Desplazamiento vertical — positivo = abajo, negativo = arriba | 4px |
| blur | Radio de desenfoque — mayor = sombra más suave | 12px |
| spread | Expansión de tamaño — positivo = más grande, negativo = más pequeño | 0px |
| color | Color de sombra con transparencia alfa | rgba(0,0,0,0.1) |
Varias sombras
Puedes apilar múltiples sombras separándolas con comas:
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.1),
0 10px 20px rgba(0, 0, 0, 0.05);
Esto crea una sombra de dos capas: una sombra oscura ajustada cerca del elemento y una sombra más suave y ligera que se extiende más lejos — produciendo un efecto de profundidad más realista.
Comparación de estilos de sombras
| Estilo | CSS | Caso de uso |
|---|---|---|
| Sutil | 0 1px 3px rgba(0,0,0,0.08) |
Tarjetas, elementos de lista |
| Medio | 0 4px 6px rgba(0,0,0,0.1) |
Botones, ventanas modales |
| Fuerte | 0 10px 15px rgba(0,0,0,0.15) |
Diálogos, ventanas emergentes |
| Brillo | 0 0 20px rgba(59,130,246,0.4) |
Estados de enfoque, CTAs |
| Interno | inset 0 2px 4px rgba(0,0,0,0.1) |
Campos de entrada, cuencas |
| Duro | 4px 4px 0 rgba(0,0,0,0.25) |
UI retro/brutalista |
Casos de uso en el mundo real
Elevación de Material Design
Material Design usa sombras para indicar niveles de elevación. Una tarjeta de nivel 1 usa 0 1px 3px rgba(0,0,0,0.12), mientras que un diálogo de nivel 4 usa 0 12px 17px rgba(0,0,0,0.14).
Efectos de hover
Profundiza la sombra en hover para crear un efecto de "levantamiento":
.card { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.card:hover { box-shadow: 0 8px 16px rgba(0,0,0,0.15); }
Estados de enfoque
Usa un brillo de color para indicadores de enfoque accesibles:
input:focus { box-shadow: 0 0 0 3px rgba(59,130,246,0.5); }
Neumorfismo
Combina sombras internas y externas con el mismo color del fondo para un aspecto suave y extruido.
Consejos para sombras mejores
| Consejo | Explicación |
|---|---|
| Mantén el desenfoque sutil | Un exceso de desenfoque parece no natural. Comienza con 4–12px para la mayoría de los elementos de UI. |
| Usa baja opacidad | Las sombras en la vida real no son completamente opacas. Una opacidad del 5–15% parece más natural. |
| Ajusta el color del fondo | Usa el mismo color del fondo para sombras internas y externas. |
| Evita sombras demasiado grandes | Las sombras demasiado grandes pueden hacer que el diseño se vea desordenado. |
| Usa sombras internas para elementos hundidos | Las sombras internas son ideales para elementos hundidos o con bordes redondeados. |
Preguntas frecuentes
¿Cuál es la diferencia entre box-shadow y drop-shadow?
box-shadow se usa para sombrear elementos específicos, mientras que drop-shadow se usa para sombrear elementos con transparencia o para crear efectos de sombra en elementos con bordes redondeados. Ambas propiedades funcionan de manera similar, pero box-shadow es más común para sombrear elementos con bordes definidos.
¿Cómo puedo hacer que mi sombra se vea más realista?
Para hacer que tu sombra se vea más realista, usa un desenfoque suave, una opacidad baja y colores que coincidan con el fondo. También puedes usar múltiples capas de sombras para crear profundidad.
¿Puedo usar sombras en elementos con transparencia?
Sí, puedes usar sombras en elementos con transparencia. Sin embargo, es importante asegurarte de que el color de la sombra sea compatible con el color del fondo para que se vea bien.