Generador de sombras
Da forma a box-shadow de CSS de manera visual en el navegador. Cada capa de sombra expone el desplazamiento horizontal y vertical, el desenfoque, la expansión, el color y la opacidad, y puedes apilar varias capas para construir la profundidad suave y realista que una sola sombra rara vez logra. Las sombras internas (inset), los brillos de color y las sombras duras conviven en el mismo panel. Una vista previa en vivo se coloca sobre una superficie clara u oscura con radio de esquina ajustable, para que juzgues la sombra sobre una forma parecida a tu componente real. La salida es CSS listo para copiar, y todo se calcula en local, así nada de tu diseño sale del navegador.
- Control por capa del desplazamiento, desenfoque, expansión, color y opacidad, con vista previa en vivo
- Apila varias capas de sombra para una profundidad suave y realista en lugar de una sola sombra plana
- Sombras internas, brillos de color, anillos de foco y sombras duras desde un mismo conjunto de controles
- Previsualiza sobre superficie clara u oscura con radio de esquina ajustable para que coincida con tus componentes
- Salida CSS lista para copiar, calculada por completo en el navegador y sin subir tu trabajo
box-shadow: 0px 8px 24px -4px rgba(15, 23, 42, 0.18);
Resumen
Reúne cada parte de un box-shadow en un solo lugar, para que leas la profundidad sobre una superficie real en vez de adivinar valores de píxeles en una hoja de estilos. Cuando queda bien, copia el CSS directamente al proyecto.
- 01
Control total por capa
Cada capa lleva su propio desplazamiento, desenfoque, expansión, color y opacidad, así ajustas la dirección y la suavidad exactas de la sombra en lugar de mover un único predefinido.
- 02
Profundidad realista apilada
Añade varias capas para recrear cómo cae la luz real, donde una sombra cercana y nítida se combina con una sombra ambiental amplia en una profundidad que una sola declaración no alcanza.
- 03
Interior y brillo en un panel
Cambia cualquier capa a interior para hundidos y campos de entrada, o expande el desenfoque y el color hacia fuera para anillos de foco y brillos de neón, sin salir de los mismos controles.
- 04
Vista previa clara y oscura
Coloca la vista previa sobre una superficie clara u oscura, porque la misma sombra se lee muy distinto sobre un fondo crema que sobre uno casi negro.
- 05
Radio de esquina a juego
Ajusta el radio y el color del elemento de vista previa para juzgar la sombra sobre una forma parecida a la tarjeta, el botón o el modal al que va destinada.
- 06
Puntos de partida cuidados
Los predefinidos cubren elevación sutil, tarjetas por capas, escalones de material, anillos de foco, brillos de marca y estilos de sombra dura, listos para aplicar y luego refinar.
Cómo usarla
Pasa de una idea aproximada a CSS listo para producción en un solo panel, tanto si replicas un archivo de diseño como si bocetas la elevación desde cero.
- 01
Elige un predefinido cercano a la profundidad que buscas, o parte de la capa única por defecto.
- 02
Ajusta el desplazamiento, el desenfoque y la expansión de la primera capa hasta que la dirección y la suavidad se sientan bien.
- 03
Afina el color y la opacidad. La mayoría de las sombras naturales son un color oscuro con baja opacidad, no negro puro.
- 04
Añade más capas para una profundidad más rica, o cambia una capa a interior para hundidos, pulsaciones y bordes internos.
- 05
Comprueba el resultado sobre superficies claras y oscuras con un radio de esquina a juego, y luego copia el CSS.
Detalles
Las sombras son la forma en que una interfaz señala elevación, foco y agrupación, así que deben ser reproducibles entre temas, componentes y en el traspaso de diseño a desarrollo.
- Admite la sintaxis completa de box-shadow: desplazamiento, desenfoque, expansión, color, opacidad y la palabra clave inset
- Varias capas se combinan en una sola declaración para una profundidad suave y por capas en lugar de una sombra plana
- La opacidad por capa mantiene las sombras como color de baja opacidad, que se lee mucho más natural que el negro puro
- El modo interior cubre botones pulsados, campos hundidos y bordes internos que las sombras exteriores no pueden expresar
- Las capas de color se convierten en anillos de foco, resaltados de selección y brillos de marca o neón al ampliar el desenfoque
- Una acción de aleatorización explora nuevas profundidades rápidamente una vez decidida la dirección general
- La vista previa alterna entre superficies claras y oscuras para que los problemas de contraste aparezcan antes de publicar
- Un radio de esquina y un color de elemento ajustables juzgan la sombra sobre una forma parecida al componente real
- Todo el cálculo se ejecuta en el navegador, así la interfaz de producto sin publicar y el diseño interno se mantienen privados
- La salida es CSS limpio que encaja en hojas de estilo, valores arbitrarios de Tailwind, variables CSS y librerías de componentes
Casos de uso
Una sombra rara vez es solo decoración. Indica qué flota por encima de la página, qué está hundido y qué tiene el foco en ese momento, y la misma receta debe escalar por todo un producto.
-
Tarjetas y superficies
Una sombra suave y por capas eleva tarjetas y paneles justo lo necesario para agrupar contenido sin la pesadez de una sola sombra oscura.
-
Botones y estados interactivos
Los estados de reposo, hover, activo y pulsado comparten una misma receta de sombra, así la elevación sube y baja de forma coherente mientras se interactúa con el control.
-
Modales, popovers y menús
Las capas flotantes necesitan una sombra más amplia y suave que las tarjetas en línea para que se lean claramente como situadas por encima de todo lo demás.
-
Campos y controles pulsados
Las sombras interiores dan a los campos de texto, los interruptores y los controles segmentados una sensación creíble de hundido o pulsado que los bordes planos no transmiten.
-
Anillos de foco y accesibilidad
Una sombra de color solo con expansión se convierte en un indicador de foco que sigue el radio de esquina, a menudo más limpio que un contorno en elementos redondeados.
-
Brillos de marca y énfasis
Una capa de color y desenfoque llama la atención sobre una acción principal o un elemento destacado sin la carga de un borde de color sólido.
-
Elevación en modo oscuro
Las sombras se desvanecen sobre fondos oscuros, así que comprobar la receta sobre una superficie oscura ayuda a ajustar la opacidad antes de que la profundidad desaparezca en modo oscuro.
-
Sistemas de diseño y tokens
Las recetas de sombra estables se convierten en tokens de elevación o variables CSS, así cada superficie comparte el mismo lenguaje de profundidad en lugar de valores sueltos.
Ver también
Cuando una sombra parte de valores de marca o de token, normaliza primero el color con Conversor de colores para que la opacidad se apoye en una base limpia. Cuando la superficie bajo la sombra también lleva un degradado, diseña ambos juntos con Generador de degradados para que la elevación y el fondo se mantengan coherentes en todo el componente.
Buenas prácticas
Las sombras parecen una decisión visual rápida, pero solo aguantan en producción cuando se piensan a la vez la dirección, la opacidad, los temas y la reutilización.
- Usa un color oscuro con baja opacidad en lugar de negro puro. Las sombras reales son translúcidas, no tinta pura.
- Mantén una dirección de luz coherente en toda la interfaz, normalmente un pequeño desplazamiento hacia abajo, para que la profundidad se sienta uniforme.
- Dos o tres capas cubren la mayoría de las elevaciones. Una sombra cercana y nítida más una sombra ambiental amplia se lee más natural que un solo desenfoque grande.
- En modo oscuro, sube la opacidad o apóyate en resaltados internos claros, porque las sombras oscuras casi desaparecen sobre superficies oscuras.
- Para elementos redondeados, prefiere una sombra de color solo con expansión antes que un contorno, así el anillo de foco sigue el radio de esquina.
- Evita valores de desenfoque enormes en superficies grandes o que se repintan a menudo, ya que las sombras pesadas aumentan el coste de pintado al hacer scroll.
- Promueve las recetas finales a tokens de elevación o variables CSS en lugar de pegar cadenas de sombra literales en muchos componentes.
- Documenta cada nivel de elevación en el sistema de diseño para que la profundidad se mantenga coherente entre los archivos de diseño y la interfaz publicada.
Limitaciones
El renderizado final depende del navegador, la pantalla y el CSS circundante, así que una sintaxis estandarizada no garantiza una profundidad percibida idéntica.
- Los navegadores difieren ligeramente en cómo desenfocan y componen las sombras, así que las muy suaves o muy apiladas pueden verse algo distintas.
- Un desenfoque y una expansión grandes en superficies amplias o con scroll aumentan el coste de pintado, sobre todo en dispositivos de gama baja.
- Esta herramienta se centra en box-shadow. Las sombras de texto, los filtros drop-shadow y las sombras de SVG siguen otra sintaxis y comportamiento.
- Una sombra afinada para una superficie clara suele necesitar una pasada aparte para el modo oscuro, en vez de reutilizarse tal cual.
- Si el proyecto exige estilos tokenizados, mapea la salida a tokens de elevación aprobados en lugar de pegar cadenas CSS literales.
- Las sombras sobre elementos transparentes o semitransparentes pueden interactuar con el fondo de formas que la superficie de vista previa solo aproxima.
- La profundidad percibida también depende del color del elemento y de la superficie que hay detrás, así que confirma los casos importantes en el diseño real.
Preguntas frecuentes
Preguntas que surgen con más frecuencia al usar box-shadow en el trabajo de front-end y en la colaboración de diseño, sobre uso, capas, temas y límites prácticos.
¿El CSS generado está listo para producción?
Sí. La salida es sintaxis estándar de box-shadow y puede llevarse a hojas de estilo, estilos de componente, valores arbitrarios de Tailwind o variables CSS sin cambios.
¿Por qué apilar varias capas de sombra?
La profundidad real viene de más de una sombra. Una sombra cercana más oscura y nítida junto a una sombra ambiental más amplia y suave se lee mucho más natural que un solo desenfoque grande.
¿Cuándo debería usar una sombra interior?
Usa la interior para superficies hundidas como campos de entrada, botones pulsados y bordes internos, donde la sombra debe caer dentro del elemento y no a su alrededor.
¿Cómo creo un anillo de foco?
Pon el desplazamiento y el desenfoque a cero, da a la capa una expansión positiva pequeña y un color de marca, y se convierte en un anillo que sigue el radio de esquina de los elementos redondeados.
¿Por qué desaparece mi sombra en modo oscuro?
Las sombras oscuras tienen poco contraste sobre fondos oscuros. Previsualiza sobre una superficie oscura y sube la opacidad, o añade un sutil resaltado interior claro, para que la profundidad siga siendo visible.
¿El color de la sombra debe ser negro sólido?
Rara vez. Las sombras reales son translúcidas. Un color oscuro con baja opacidad se mezcla con lo que hay detrás del elemento y se ve mucho más natural que el negro puro.
¿Se sube mi diseño mientras edito?
No. Toda la vista previa y la generación de CSS ocurren en local, en el navegador, lo que hace la herramienta segura para interfaces de producto sin publicar y trabajo de diseño confidencial.
¿Funciona con Tailwind?
Sí. La salida encaja en la sintaxis de valores arbitrarios como shadow-[...], y también puede ir en tailwind.config bajo boxShadow o en extensiones del theme.
¿Las sombras afectan al rendimiento de la página?
Las sombras pequeñas son baratas. Un desenfoque o una expansión muy grandes en superficies amplias o con scroll pueden aumentar el coste de pintado en dispositivos de gama baja, así que acota las sombras pesadas.
¿Cómo mantengo la elevación coherente entre páginas?
Promueve las recetas finales a tokens de elevación o variables CSS y referéncialos en componentes reutilizables, en lugar de repetir cadenas de sombra literales.
Herramientas relacionadas
Una sombra es un paso más para dar profundidad y color a una interfaz. Combínala con la conversión de color y el diseño de degradados para ir de valores de color normalizados a la elevación y a una superficie coherente y publicada.