Generador de box-shadow CSS
Da forma a una sombra con controles deslizantes y copia el CSS.
Caja y fondo
Funciona en tu navegador. Nada de lo que escribes se envía a ningún sitio.
- Apila hasta 8 capas
- Sombras interiores
- 6 preajustes listos para usar
Cómo hacer una sombra box-shadow en CSS
- Empieza desde un preajuste, o mueve los controles de desplazamiento, desenfoque y expansión.
- Añade capas para una sombra más suave y natural.
- Copia la línea box-shadow en tu CSS.
Qué hace cada valor de box-shadow
| Valor | Significado | Rango típico |
|---|---|---|
| Desplazamiento X | Mueve la sombra a la derecha, o a la izquierda si es negativo | -100 a 100px |
| Desplazamiento Y | Mueve la sombra hacia abajo, o hacia arriba si es negativo | -100 a 100px |
| Desenfoque | Suaviza el borde; 0 da una sombra de borde duro | 0 a 200px |
| Expansión | Agranda o encoge la sombra antes de desenfocarla | -100 a 100px |
| Opacidad | Qué tan sólido se ve el color de la sombra | 10 a 30% para un aspecto natural |
Valores de partida para aspectos habituales
| Preajuste | Desplazamiento Y | Desenfoque | Expansión | Opacidad |
|---|---|---|---|---|
| Suave | 10px | 30px | -5px | 20% |
| Nítida | 6px (también X) | 0px | 0px | 100% |
| Resplandor | 0px | 24px | 4px | 55% |
| Interior | 2px | 6px | 0px | 25% |
En capas y Flotante se construyen sobre estos apilando dos o tres sombras a la vez, algo que una sola capa no puede reproducir.
Consejos para sombras de aspecto natural
- La luz real rara vez proyecta una sombra negro puro. Usa una opacidad del 10 al 30 por ciento, y acerca el color al tono del fondo para un resultado más suave.
- Apila 2 o 3 sombras: una pequeña y ajustada cerca de la caja y otra más grande y difuminada más lejos, tal como están construidos los preajustes En capas y Flotante.
- Una expansión negativa con un desplazamiento vertical grande da el aspecto de tarjeta flotante habitual en interfaces modernas.
- Un padre con overflow: hidden recorta una sombra exactamente igual que recorta contenido, así que añade relleno al padre en lugar de quitar el overflow en todas partes.
Preguntas frecuentes sobre Generador de sombras
¿Qué significan los valores de box-shadow?
En orden: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de expansión y color. Los desplazamientos positivos mueven la sombra a la derecha y hacia abajo, y la palabra clave inset la dibuja dentro de la caja.
¿Cómo consigo que una sombra se vea natural?
Apila dos o tres sombras suaves con poca opacidad: una pequeña y ajustada cerca de la caja y otra más grande y difuminada más lejos. Las sombras reales rara vez son negro puro a máxima intensidad.
¿Qué hace la expansión?
La expansión agranda o encoge la sombra antes de desenfocarla. Una expansión negativa con un desplazamiento vertical grande da el aspecto de tarjeta flotante.
¿Por qué se corta mi sombra?
Un elemento padre con overflow: hidden recorta todo lo que se dibuje fuera de su caja, sombras incluidas. Añade relleno al padre o quita ese ajuste de overflow.
¿Cuántas capas de sombra puedo apilar?
Hasta 8 en esta página. El propio CSS no tiene un límite fijo de capas box-shadow, pero más de 3 o 4 rara vez se ve distinto y cuesta más de renderizar.
¿Una sombra cambia el tamaño o el espaciado de un elemento?
No. Un box-shadow es puramente visual y nunca afecta al diseño, a diferencia de un borde u outline, así que los elementos vecinos nunca se desplazan cuando añades o cambias el tamaño de una.