Generador de Sombras CSS
Construya una sombra de caja o de texto a partir de los desplazamientos, desenfoque, extensión y color, y vea cuánto espacio necesita.
Resultados
Qué hace esta herramienta
Una sombra de caja son cuatro números y un color en un orden que nadie recuerda, y la diferencia entre una sombra que levanta la tarjeta de la página y una que parece un borrón suele estar en uno de ellos. Fije los valores aquí y la línea vuelve lista para pegar, con el color transparente escrito como corresponde. Las cifras de alcance le dicen cuánto espacio necesita la sombra alrededor de la caja, que es lo que decide si sobrevive dentro de una cuadrícula apretada.
Fórmula
box-shadow lleva desplazamiento, desenfoque, extensión y color ; text-shadow no tiene extensión ni inset
Variables
| Símbolo | Significado | Unidad |
|---|---|---|
kind | Sombra en | — |
x | Hacia el lado | px |
y | Hacia abajo | px |
blur | Desenfoque | px |
spread | Extensión | px |
color | Color de la sombra | — |
alpha | Cómo de opaca es | — |
inset | Por dentro en vez de por fuera | — |
OUT | El CSS | — |
VA | Solo el valor | — |
RE | Hasta dónde llega hacia fuera | px |
RL | Espacio necesario a la izquierda | px |
RB | Espacio necesario debajo | px |
CL | Color de la sombra | — |
Ejemplo resuelto
- Sombra enbox
- Hacia el lado0 px
- Hacia abajo4 px
- Desenfoque12 px
- Extensión-2 px
- Color de la sombra#17191f
- Cómo de opaca es0,18
- Por dentro en vez de por fuerano
- El CSSbox-shadow: 0px 4px 12px -2px rgba(23, 25, 31, 0.18);
- Solo el valor0px 4px 12px -2px rgba(23, 25, 31, 0.18)
- Hasta dónde llega hacia fuera4,0 px
- Espacio necesario a la izquierda4,0 px
- Espacio necesario debajo8,0 px
- Color de la sombrargba(23, 25, 31, 0.18)
Preguntas frecuentes
¿Cuál es la diferencia entre desenfoque y extensión?
La extensión hace la sombra más grande antes de desenfocarla, como si la caja que la proyecta hubiera crecido; el desenfoque suaviza después el borde hacia fuera, desde donde acabe esa forma. Una extensión negativa es el truco tras la mayoría de las buenas sombras: mete la forma hacia dentro para que el borde suave quede debajo de la caja en vez de asomar por los lados, y eso es lo que hace que una tarjeta parezca levantada en vez de contorneada. Las sombras de texto no tienen extensión.
¿Qué dice la cifra de alcance?
Hasta dónde sobrepasa la sombra el borde de la caja, que es el espacio que hay que dejar alrededor. La mitad del desenfoque más la extensión, ajustado por el desplazamiento de cada lado. Si el alcance de abajo es mayor que el margen bajo su tarjeta, la sombra será recortada por lo que venga después, y el síntoma habitual es una sombra que se ve bien sola y aparece truncada en una cuadrícula.