Este generador de box-shadow en CSS es una herramienta gratuita que funciona en el navegador y permite crear y exportar visualmente sombras de elementos sin escribir una sola línea de código.
Arrastra un control deslizante y la vista previa se actualizará al instante. Cada propiedad está justo frente a usted.
Lo que puedes controlar:
- Desplazamiento horizontal y vertical
- Radio de desenfoque y extensión
- Color de sombra y opacidad.
- Dirección de entrada o salida
Apila varias capas de sombras para obtener efectos complejos. ¿No estás seguro de por dónde empezar? Elige uno de los 8 ajustes preestablecidos integrados como Soft Lift, Neon Glow o Retro, luego modifíquelo desde allí.
El cuadro de vista previa también es flexible. Cambia entre formas redondeadas, cuadradas, circulares y de tarjetas. Cambia el color del cuadro y el fondo del lienzo para que coincidan con tu contexto de diseño real.
Cuando hayas terminado, exporta en el formato que necesitas:
- Sencillo CSS
- Una CSS propiedad personalizada (
--shadow: ...) - Una entrada de configuración Tailwind
- Un objeto de estilo en línea React
Minimice el resultado o manténgalo legible. Añade el prefijo -webkit- con un clic. Copia y pegue directamente en tu proyecto.
Sin registro. Sin anuncios. Sólo una herramienta rápida y limpia que se aparta de tu camino.
¿Qué es un generador de sombras de caja CSS?
Un generador de sombras de cuadros CSS es una herramienta basada en navegador que convierte las entradas de color y control deslizante en una sintaxis de sombras de cuadros lista para copiar.
En lugar de adivinar los valores de desplazamiento y desenfoque manualmente, arrastra algunos controles y la herramienta escribe la declaración por usted.
Toda la herramienta se basa en una única propiedad en CSS (EN), nada más.
- No toca píxeles ni rasteriza nada.
- No diseña tu diseño, solo una línea de estilo.
- No reemplaza el paso de exportación de una herramienta de diseño, solo las matemáticas manuales detrás de él.
Tampoco es lo mismo que un generador de sombras de texto, que sombrea formas de letras en lugar de cuadros de elementos.
Lo que realmente produce es una cadena de código, lista para pegar directamente en una hoja de estilo.
¿Cómo funciona la propiedad box-shadow?
La propiedad box-shadow (EN) dibuja una sombra usando cinco valores en un orden fijo: desplazamiento horizontal, desplazamiento vertical, radio de desenfoque, radio de extensión y color.
Omita un valor y el navegador volverá a su valor predeterminado, por lo que aún se representa una sombra con solo dos números, pero sin desenfoque ni extensión.
| Valor | Controles | En cero o negativo |
|---|---|---|
| Desplazamiento horizontal | Posición de la sombra, izquierda o derecha | Negativo empuja la sombra hacia la izquierda. |
| Desplazamiento vertical | Posición de la sombra, arriba o abajo | Negativo empuja la sombra hacia arriba. |
| Radio de desenfoque | Suavidad de los bordes | El valor cero produce un borde duro y definido |
| Radio de extensión | Tamaño total de la sombra | Negativo encoge la sombra. |
El orden importa: intercambia desenfoque y extensión y el navegador lee el segundo número como extendido independientemente de la intención.
Sombra exterior versus sombra insertada
Sombra exterior: el comportamiento predeterminado, se ubica detrás del elemento como si el cuadro se hubiera levantado de la página.
Sombra insertada: agregar la palabra clave insertada invierte el efecto, de modo que la sombra cae dentro de los bordes del elemento como si estuviera presionada contra la superficie.
La palabra clave siempre va primero en la declaración, antes de cualquiera de los valores numéricos.
¿Qué formatos de color puede utilizar una sombra de cuadro?
Un color de sombra de cuadro acepta cualquier valor de color CSS válido: hexadecimal, rgb, rgba, hsl o un color con nombre como el negro.
rgba es el que más importa para las sombras, porque su cuarto valor controla la transparencia.
- Hex: solo color sólido, sin canal de transparencia
- rgba: rojo, verde, azul, más un valor alfa entre 0 y 1
- hsl / hsla: tono, saturación, luminosidad, con la misma ranura alfa opcional
Una sombra configurada con opacidad total parece un bloque de bordes duros. Suelte el alfa a algo así como 0.15 o 0.2 y se leerá como una sombra en lugar de una forma.
Los diseñadores a menudo entregan colores como códigos hexadecimales de una maqueta, y convertir ese valor hexadecimal a rgba suele ser el primer paso real para hacer coincidir la salida de un generador con una compilación.
Lo mismo ocurre en la otra dirección. Si se creó una paleta en HSL, traducir una selección HSL a rgb o rgba mantiene el color de la sombra consistente con el resto del sistema de diseño.
¿Cómo se superponen varias sombras de cuadros en una sola declaración?
Separe cada sombra con una coma y el navegador las apilará en una única declaración de sombra de cuadro.
Profundidad de los controles de orden: la primera sombra de la lista se ubica en la parte superior, más cercana al elemento, y cada una después se ubica más atrás.
Una sombra de tarjeta de dos capas suele verse así:
box-shadow: 0 2px 4px rgba(0,0,0,0.2), 0 8px 16px rgba(0,0,0,0.15);La primera sombra es densa y oscura y hace el trabajo de primer plano. El segundo es más grande y más suave, dando la ilusión de que la luz ambiental cae alrededor de todo el objeto.
- Dos capas: una sombra de contacto densa más una sombra ambiental suave
- Tres capas: agrega una tercera sombra aún más suave para mayor profundidad en tarjetas grandes o modales.
- No hay un límite práctico en el número de capas, aunque los navegadores se ralentizan una vez que se acumulan más de cuatro o cinco.
Los cargadores de un solo div CSS se apoyan en este truco constantemente, simulando un anillo de puntos con un elemento en lugar de seis nodos separados.
Esa es la misma técnica de capas detrás de la mayoría de las entradas en un generador de cargador CSS.
¿Qué navegadores admiten box-shadow? ¿Necesita un prefijo de proveedor?
No. Todos los navegadores actuales muestran box-shadow sin ningún prefijo, y lo han hecho durante más de una década.
La propiedad alcanzó el estado Baseline Ampliamente Disponible el 29 de enero de 2018, según el conjunto de datos de características web que impulsa la tabla de compatibilidad de MDN (EN).
En realidad, ese hito se produjo años después de que los navegadores ya hubieran hecho que la propiedad fuera segura de usar.
- Chrome eliminó el requisito del prefijo -webkit- en la versión 10, lanzada en marzo de 2011
- Firefox eliminó -moz- en la versión 4, también en marzo de 2011
- Safari siguió en la versión 5.1, mediados de 2011.
- Internet Explorer agregó soporte sin prefijos en la versión 9, su primera versión compatible con CSS3
La especificación subyacente, CSS Módulo de Fondos y Fronteras Nivel 3 (EN), todavía la publica el W3C como un Borrador de Recomendación Candidata, no una Recomendación terminada.
Esto a pesar de que la propiedad box-shadow se mantiene estable en los navegadores durante más de una década.
Esa brecha entre el estado de las especificaciones y la confiabilidad en el mundo real es exactamente el tipo de cosas que las pruebas de compatibilidad entre navegadores (EN) deben detectar.
Una propiedad que funcione bien en tu máquina no garantiza que se comporte igual en todas partes.
A veces, los proyectos antiguos todavía contienen declaraciones -webkit-box-shadow o -moz-box-shadow sobrantes de un texto estándar de hace una década. Eliminarlos hoy no cambia nada en ningún navegador compatible.
Generador de sombras de caja o CSS escrito a mano: ¿cuál conviene usar?
Usa un generador para crear una sombra única y utilice la codificación manual una vez que mantenga un sistema de diseño con docenas de ellas.
Los dos no son realmente rivales, más bien son herramientas adecuadas para diferentes etapas del mismo trabajo.
| Método | Facilidad de uso | Precisión de salida | Lo mejor para |
|---|---|---|---|
| herramienta generadora | Alto, arrastra y copia | Bueno para sombras individuales | Estilo rápido y único |
| Herramientas de desarrollo del navegador | Medio, necesita un elemento existente | Valores exactos y en vivo | Ajustar una sombra existente |
| Codificado a mano CSS | Bajo, requiere memorizar la sintaxis. | Depende del codificador | Sistemas de diseño, tokens reutilizables. |
| Exportación de herramientas de diseño | Alto por dentro Figma o XD | A menudo necesita limpieza manual. | Traspaso del diseño al código |
Devtools gana en precisión porque estás editando un elemento real en un diseño real. No es necesario adivinar cómo se verá un valor una vez que se coloque en tu página real.
La codificación manual gana una vez que las sombras se convierten en fichas.
Un sistema de diseño con elevación-1 a elevación-4 necesita variables compartidas, no cuatro cadenas generadas por separado que parezcan similares.
La mayoría de los equipos frontend (EN) enfrentan la misma compensación con una propiedad completamente diferente.
Una rápida experiencia a menudo comienza en un CSS generador de gradiente (EN).
Por lo general, se reconstruye como propiedades personalizadas escritas a mano una vez que el gradiente debe vivir en cinco componentes diferentes.
Un generador tampoco puede decirle cuándo una sombra es la herramienta completamente incorrecta. Esa es una decisión que ningún control deslizante tomará por usted.
¿Qué estilo de sombra se adapta a qué objetivo de diseño?
Cuatro estilos de sombras cubren la mayoría de las interfaces reales: suave, dura, neumórfica y de elevación material.
En realidad, cada uno es solo una combinación diferente de desenfoque, extensión y capas aplicadas a la misma propiedad.
Sombra suave
Una sombra suave utiliza un radio de desenfoque amplio y baja opacidad, por lo que el Edge se desvanece en lugar de detenerse abruptamente.
Es la opción predeterminada para tarjetas, modales y cualquier cosa que se sienta como si estuviera descansando suavemente sobre la página.
Ventajas:
- Se lee tan tranquilo y moderno en casi cualquier entorno.
- Perdona los pequeños errores de desplazamiento o de color, ya que el desenfoque oculta los bordes nítidos.
Contras:
- Puede verse descolorido o apenas visible en fondos ocupados
- Si se usa en exceso en toda una página, deja de indicar profundidad en absoluto
La galería CSS efectos de sombra (EN) es una forma rápida de ver sombras suaves aplicadas en botones, tarjetas y encabezados uno al lado del otro.
Sombra dura
Cero desenfoque, algo extendido, un desplazamiento que es fácil de ver. Es una sombra dura y se lee como un elemento gráfico más que como un efecto de iluminación.
Pro: le da a las interfaces una personalidad distintiva, casi retro, que las sombras suaves no pueden fingir.
Con: choca mal con cualquier interfaz de usuario que ya sea suave o minimalista, ya que los dos estilos no se combinan.
El diseño web brutalista y neobrutalista se apoya constantemente en sombras duras, a menudo combinadas con bordes gruesos y colores planos en lugar de degradados.
Neumorfismo
La regla de contraste sin texto (EN) de WCAG 2.1 requiere una proporción 3:1 para los componentes interactivos, y la mayoría de las interfaces neumórficas fallan por diseño.
El estilo se basa en dos sombras, una clara y otra oscura, colocadas sobre un fondo apenas diferente del elemento mismo.
Eso es exactamente lo que crea el problema del bajo contraste.
| Ventajas | Contras |
|---|---|
| Identidad visual táctil distintiva | Falla con frecuencia las comprobaciones de contraste WCAG |
| Fuerte sentimiento de marca para productos de nicho | Los estados interactivos son difíciles de distinguir |
| Funciona bien para paneles vistos por una audiencia capacitada | Mala adaptación a las necesidades de accesibilidad del público |
Si una apariencia esmerilada y translúcida se acerca más a lo que buscas, esa es una técnica completamente diferente, construida a partir de un fondo borroso en lugar de sombras en capas.
Un generador de morfismo de vidrio separado cubre ese estilo.
Elevación de Material Design
Las Pautas de elevación de Material Design (EN) de Google asignan la profundidad de la sombra a una escala de espacio z que va de 0 a 24.
Cada nivel se relaciona con un valor de dp específico y una sombra ligeramente diferente.
Una mayor elevación significa una sombra más grande y más suave, que imita un objeto físicamente más cercano a la fuente de luz.
Donde sobresale: coherencia en una aplicación grande, ya que cada componente elige un nivel en lugar de un valor de sombra único.
El sistema escala limpiamente desde botones hasta modales.
Donde se queda corto: es un compromiso completo con el sistema de diseño, excesivo para una sola página de marketing que solo necesita una bonita sombra de tarjeta.
¿Box-shadow afecta el rendimiento de renderizado de páginas?
Sí, más que la mayoría de las propiedades. Box-shadow obliga al navegador a volver a pintar píxeles en cada cuadro que cambia. Ese es uno de los pasos más costosos en el proceso de renderizado.
La documentación de rendimiento de renderizado (EN) de Google coloca el tiempo disponible por fotograma en aproximadamente 16 milisegundos para mantener 60 fps, cubriendo secuencias de comandos, estilo, diseño y pintura combinados.
La pintura se señala en esa misma documentación como una de las partes más costosas de ese presupuesto.
- La animación de la sombra del cuadro activa directamente un repintado en cada cuadro.
- Animar la opacidad o transformar evita ese repintado casi por completo
- Una sombra de cuadro estática y no animada no cuesta nada extra una vez que la página ha sido pintada
Las pruebas de renderizado de Tobias Ahlin (EN) encontraron una solución alternativa: poner la sombra en un pseudoelemento y animar la opacidad de ese elemento en lugar de la sombra misma.
El resultado visual parece idéntico a animar la sombra del cuadro directamente, solo que sin marcar el paso de pintura en cada cuadro.
¿Cuándo no se aplica box-shadow?
box-shadow deja de ser la herramienta adecuada en el momento en que la forma que necesitas no es un rectángulo.
La propiedad siempre sigue al cuadro del elemento, o su radio de borde si está configurado. No tiene idea de lo que hay dentro de esa caja.
- PNG y logotipos transparentes: use el filtro: sombra paralela() en su lugar, ya que sigue el canal alfa de la imagen en lugar de su marco rectangular
- Formas vectoriales irregulares: un filtro nativo SVG traza la ruta real en lugar de un cuadro delimitador
- Animación económica y constante: box-shadow fuerza un repintado en cada fotograma, por lo que un pseudoelemento animado es la mejor elección
- Imprimir hojas de estilo: la mayoría de los navegadores eliminan la sombra del cuadro al imprimir de forma predeterminada
Ese segundo caso es más importante para los logotipos e íconos creados en SVG (EN), donde una sombra rectangular detrás de una estrella o la forma de un logotipo obviamente parece incorrecta.
La propia documentación de MDN sobre el filtro: drop-shadow() (EN) hace explícita la distinción. box-shadow sombrea el cuadro, drop-shadow sombrea el contenido.
La sombra exportada de una herramienta de diseño también puede no traducirse limpiamente. El efecto de sombra paralela de Figma (EN) se corresponde estrechamente con la sombra del cuadro, pero un brillo creado a partir de rellenos en capas generalmente no tiene ningún equivalente limpio de CSS.
¿Cómo se utiliza un generador de sombras de caja CSS, paso a paso?
El orden siguiente coincide con la disposición real de la mayoría de los generadores, de izquierda a derecha y de arriba a abajo.
- Paso 1: elija primero el desplazamiento horizontal y vertical, ya que estos deciden dónde se asienta la sombra antes de que importe cualquier otra cosa.
- Paso 2: establece el radio de desenfoque para controlar qué tan suave o nítido se ve el Edge
- Paso 3: ajuste el radio de extensión solo si la sombra necesita verse más grande o más pequeña que el elemento mismo
- Paso 4: establezca el color y la opacidad al final, ya que la oscuridad de una sombra solo tiene sentido una vez que se establecen su tamaño y forma
- Paso 5: active la inserción si la sombra necesita ubicarse dentro del elemento en lugar de detrás de él
- Paso 6: obtenga una vista previa del resultado con el color de fondo real en el que se ubicará el elemento, no con el lienzo predeterminado del generador
- Paso 7: copie la declaración de sombra de cuadro generada y péguela en la regla de la hoja de estilo del elemento
La vista previa con un fondo incorrecto es la razón más común por la que una sombra se ve perfecta en la herramienta y incorrecta en la página en vivo.
El área de vista previa predeterminada de un generador suele ser de color blanco o gris claro, lo que favorece casi cualquier valor de sombra.
¿Cómo se agrega el código de sombra de cuadro generado en Tailwind CSS, Sass o Bootstrap?
Un generador te entrega una cadena de sombra de caja sin editar. Lo que haga con él a continuación depende del marco que ya utilice el proyecto.
| Marco | donde va el valor | Resultado |
|---|---|---|
| Tailwind CSS | Clave boxShadow en la configuración del tema, o una clase de valor arbitrario | utilidad de marca sombra o [valor] sombra |
| Sass | Una variable o un mixin reutilizable | $shadow-card: 0 2px 4px rgba(0,0,0,0.2); |
| Bootstrap | Anular una de las tres variables de sombra de Sass | $box-shadow, $box-shadow-sm o $box-shadow-lg |
Tailwind (EN) se envía con una escala de sombra fija lista para usar.
Su documentación actual v4 (EN) enumera utilidades de siete tamaños, desde Shadow-2xs hasta Shadow-2xl.
Cada uno se asigna a una variable CSS en lugar de a un valor codificado.
Colocar la salida de un generador en Tailwind significa reemplazar una de esas siete variables o buscar la sintaxis arbitraria sombra-[valor] para una sola vez.
Sass toma el valor tal cual. Almacenarlo como una variable, $shadow-card por ejemplo, es lo que convierte una salida única del generador en algo reutilizable en toda una biblioteca de componentes.
Bootstrap (EN) es el más rígido de los tres.
Su documentación oficial (EN) define exactamente cuatro clases de sombra, sombra-ninguna, sombra-sm, sombra y sombra-lg, construidas a partir de tres variables Sass.
El valor personalizado de un generador no encaja directamente en Bootstrap. Tiene que reemplazar una de esas tres variables antes de volver a compilarla, o aplicarse como estilo en línea.
El sistema de diseño Polaris de Shopify lleva el enfoque de token un paso más allá.
Define profundidades de sombra con nombre en su propio paquete de tokens en lugar de permitir que los componentes individuales lleven cadenas de sombra de caja sin formato. Ese es el mismo instinto detrás de una variable Sass, simplemente formalizada como un sistema de diseño real.
¿Cuáles son los errores más comunes al utilizar sombras de cuadros?
La mayoría de los errores de sombra de cuadro se reducen a un puñado de errores repetibles.
- Falta una coma entre sombras en capas
- Valores de desenfoque y dispersión intercambiados
- inserto colocado en la posición incorrecta
- Color de sombra dejado en opacidad total.
Dos de ellos guardan silencio. El navegador no arroja un error, simplemente muestra algo que no coincide con lo que pretendía.
| error | lo que parece | Arreglar |
|---|---|---|
| coma faltante | La segunda sombra se ignora o rompe toda la declaración. | Separe cada sombra con una coma, no con un espacio. |
| Desenfoque y extensión intercambiados | La sombra se expande mucho más allá del Edge del elemento. | Mantén el orden: desplazamiento-x, desplazamiento-y, desenfoque, extensión, color |
| inserto colocado al final | La declaración no es válida y no se muestra ninguna sombra. | el recuadro siempre va primero, antes de cualquier número |
| Color de opacidad total | La sombra se lee como un bloque sólido en lugar de una sombra. | Usa rgba con un alfa de entre 0.15 y 0.3 |
Los desajustes en el radio del borde causan un problema más silencioso. Una sombra en un elemento redondeado sigue automáticamente el radio del borde.
Una sombra que parece cuadrada contra las esquinas redondeadas generalmente significa que el radio se estableció en un elemento secundario, no en el que lleva la sombra.
Los fondos transparentes provocan una confusión similar. Se representa una sombra alrededor del cuadro del elemento, no alrededor de lo que sea visible dentro de él.
Un PNG transparente ubicado dentro de un div seguirá mostrando una sombra rectangular, sin importar cuán irregular se vea la imagen.
Preguntas frecuentes: Generador de box-shadow CSS
¿Cuál es la diferencia entre sombra de cuadro y sombra de texto?
text-shadow sombrea las formas de las letras del contenido del texto, mientras que box-shadow sombrea todo el cuadro de borde del elemento.
Un título puede contener ambas cosas a la vez: una sombra de texto detrás de sus caracteres y un cuadro de sombra separado detrás del contenedor que los contiene.
¿Funciona correctamente box-shadow con border-radius en elementos redondeados?
Sí. Una sombra de cuadro sigue automáticamente el radio de borde de un elemento, curvándose en las mismas esquinas en lugar de permanecer rectangular. Si una sombra parece cuadrada en un elemento redondeado, el radio se ubica en un elemento secundario, no en el que lleva la sombra (consulte errores comunes).
¿Se puede animar box-shadow con CSS transiciones?
Técnicamente sí, aunque tiene un costo: la transición de sombra de cuadro obliga al navegador a volver a pintar en cada cuadro. Una alternativa más suave anima la opacidad de un pseudoelemento que ya lleva la sombra, como se explica en la sección de rendimiento.
¿Cómo se puede hacer que un valor de sombra de cuadro responda en todos los tamaños de pantalla?
Escale el desplazamiento, el desenfoque y la extensión dentro de una consulta de medios, reduciendo todos los valores a medida que se estrecha la ventana gráfica.
Un patrón común usa clamp() solo en el radio de desenfoque, permitiendo que una declaración se ajuste suavemente en lugar de escribir una regla separada por punto de interrupción.
¿Cómo se reutiliza el CSS generado en varios proyectos?
Almacene la declaración una vez, en una CSS propiedad personalizada como --shadow-card, en lugar de pegar la misma cadena en cada hoja de estilo.
Cualquier proyecto que importe el archivo de propiedades compartido hereda el mismo valor de sombra y una sola edición lo actualiza en todas partes.
¿Dónde se avería un generador de sombras de caja CSS?
Un generador de sombras de cuadro CSS se estropea una vez que un proyecto acumula más de una docena de valores de sombra distintos en su biblioteca de componentes. En ese punto, un sistema de token mantenido reemplaza la salida única del generador.
Arreglar esa expansión sigue un orden específico, no una pasada de limpieza aleatoria.
- Primero, comprueba el resultado en distintos navegadores
- Después, unifica los valores duplicados
- Extracción de tokens en un archivo de token de diseño compartido tercero
Al verificar el renderizado, primero se detecta el error raro antes de que se convierta en una docena de componentes. La consolidación en segundo lugar de valores casi duplicados elimina el ruido que hace que la extracción de tokens sea dolorosa.
Estandarizar las sombras en un conjunto de tokens fijos cuesta flexibilidad. Un componente ya no puede solicitar un ajuste arbitrario sin un pequeño paso de construcción, intercambiando un pulido único por consistencia en toda la interfaz.
El siguiente paso natural es redondear las esquinas del mismo elemento con un generador de radio de borde dedicado, ya que la profundidad de la sombra y el radio de las esquinas se ajustan juntos en casi todas las tarjetas o botones.