Generador de box-shadow CSS
Este generador de box shadow CSS te deja elegir una plantilla o ajustar el desplazamiento, el desenfoque, la expansión, el color y la opacidad con los controles. Puedes superponer varias sombras y convertir cualquiera en sombra interior (inset). La vista previa se actualiza al instante y el código CSS se copia con un clic. También puedes pegar tu propio CSS abajo y seguir editándolo.
Fuente: css-backgrounds-3, § 6.1, W3C – CSS Backgrounds and Borders Module Level 3: the box-shadow property. Actualizado: .
Cómo se calcula
Cómo funciona box-shadow
Según la especificación del W3C (CSS Backgrounds and Borders Level 3), una sombra se compone de dos a cuatro longitudes, un color opcional y la palabra clave opcional inset:
Cómo crear una sombra CSS
- Elige una plantilla o ajusta con los controles el desplazamiento, el desenfoque (blur), la extensión (spread), el color y la opacidad.
- Añade más sombras si hace falta y marca las que quieras como sombra interior (inset).
- Copia la declaración CSS o pega tu propio código box-shadow para seguir editándolo.
| Valor | Significado |
|---|---|
| 1.ª longitud | Desplazamiento horizontal a la derecha (negativo: a la izquierda) |
| 2.ª longitud | Desplazamiento vertical hacia abajo (negativo: hacia arriba) |
| 3.ª longitud | Radio de desenfoque, nunca negativo; 0 si se omite |
| 4.ª longitud | Expansión (spread): agranda la sombra; un valor negativo la reduce |
| Color | si se omite, se usa el color del texto (currentColor) |
inset | dibuja la sombra dentro de la caja |
Separa varias sombras con comas. La primera sombra se pinta encima y las demás detrás. Las sombras no afectan al diseño ni crean barras de desplazamiento, pero un contenedor con overflow: hidden las recorta.
¿Hasta dónde llega el desenfoque?
La especificación exige un desenfoque que se aproxime a uno gaussiano con una desviación estándar igual a la mitad del radio de desenfoque. La transición mide así unas dos veces el valor de desenfoque y queda centrada en el borde de la sombra: hacia fuera llega aproximadamente un radio de desenfoque.
Ejemplo 0 10px 25px -5px: el borde queda a 25 − 5 = 20 px de la caja, desplazado 10 px hacia abajo. La sombra sobresale unos 20 − 10 = 10 px arriba, 20 px a los lados y 20 + 10 = 30 px abajo. El generador muestra estos valores en «Cuánto sobresale la sombra»: útiles como padding para que nada se recorte.
Usos habituales
- Tarjetas y botones: combina dos sombras, una pequeña y más oscura para el contorno y otra grande y suave para la profundidad.
- Anillo de foco:
0 0 0 3pxcon un color de acento dibuja un contorno que no mueve el diseño. - Sombra interior:
insethace que los campos de formulario se vean hundidos.
Herramientas relacionadas: esquinas redondeadas con el generador de border-radius CSS, degradados con el generador de degradados CSS y colores legibles con el comprobador de contraste.
Preguntas frecuentes
¿Qué diferencia hay entre blur y spread?
El desenfoque (3.er valor) suaviza el borde sin cambiar la superficie de la sombra. La expansión (4.º valor) agranda o reduce la superficie misma antes de desenfocarla. Con desenfoque 0 y expansión positiva obtienes un contorno nítido.
¿Cómo superpongo varias sombras?
Sepáralas con comas, p. ej. 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). La primera sombra se dibuja encima. En el generador añades más con «+ Sombra».
¿Por qué se corta mi sombra?
Las sombras no cuentan para el tamaño del elemento. Si un contenedor tiene overflow: hidden u overflow: auto, recorta todo lo que sobresale. Dale al contenedor al menos el padding que el generador indica como sobresaliente.
¿box-shadow funciona en todos los navegadores?
Sí. box-shadow, con varias sombras, inset y colores rgba(), funciona sin prefijos en todos los navegadores actuales. El generador escribe los colores transparentes como rgba(), que también entienden los navegadores antiguos.
¿Cómo pongo una sombra solo abajo?
Con una extensión negativa que compense el desenfoque, p. ej. box-shadow: 0 8px 6px -6px rgba(0, 0, 0, 0.3). Así la sombra no sobresale por arriba ni por los lados, solo 8 px por debajo.
Fuentes y base legal
- css-backgrounds-3, § 6.1: W3C – CSS Backgrounds and Borders Module Level 3: the box-shadow property
- css-backgrounds-3, § 6.1.2: W3C – CSS Backgrounds and Borders Module Level 3: Blurring Shadow Edges
- MDN Web Docs – box-shadow
Última actualización: · Principios editoriales
Herramientas relacionadas
- Generador de border-radius CSSRedondea esquinas con controles: todas a la vez o una por una, en px o %, elípticas con 8 valores; forma abreviada más corta, vista previa y CSS listo.
- Generador de degradados CSSCrea degradados CSS: lineales, radiales o cónicos, con los puntos de color que quieras, ángulo y color de respaldo. Vista previa y CSS listo para copiar.
- Convertidor de colores: HEX, RGB, HSL, HSV, CMYKConvierte colores de HEX a RGB, de RGB a HEX, HSL, HSV, HWB y CMYK: escribe el color en cualquier formato o elígelo y copia el resultado. En tu navegador.
- Comprobador de contraste de colores según WCAG 2.2Comprueba el contraste entre el color del texto y el del fondo: relación de contraste WCAG 2.2, niveles AA/AAA para texto normal, texto grande y componentes.
- Cuál es mi dirección IPMuestra al instante tu dirección IP pública, detecta si es IPv4 o IPv6 y explica la diferencia. Gratis: tu IP no se guarda.
- Calcular letra DNI y NIE al instanteCalcular letra DNI online: escribe las 8 cifras y obtén la letra del NIF; también para NIE (X, Y, Z). Comprueba si la letra es correcta. Sin registro.
- Dígito verificador RUT: calcúlalo o valida un RUT chilenoDígito verificador RUT: escribe el número y obtén el dígito (0 a 9 o K) con el cálculo módulo 11 paso a paso, o pega un RUT completo con guion para validarlo.
- Validar CUIT y CUIL: comprobá el dígito o calculalo con el DNIValidar CUIT o CUIL online: pegá las 11 cifras y comprobá el dígito verificador, o escribí el DNI y el sexo y calculá el CUIL con el método módulo 11.
- Dígito de verificación NIT: cálculo del DV paso a pasoDígito de verificación NIT: escribe el NIT o la cédula y obtén el DV con el método de la DIAN (pesos 3, 7, 13, 17…), o pega un NIT con guion para validarlo.