Generador de box-shadow CSS

La propiedad CSS `box-shadow` añade uno o más efectos de sombra a un elemento HTML. Cada sombra se define con hasta seis valores: una palabra clave opcional `inset`, un desplazamiento horizontal, un desplazamiento vertical, un radio de desenfoque, un radio de expansión y un color. Los desplazamientos horizontales positivos empujan la sombra hacia la derecha; los desplazamientos verticales positivos la empujan hacia abajo. Las sombras múltiples se separan con comas y se renderizan de frente a atrás. Es el mecanismo CSS principal para añadir profundidad visual, jerarquía de elevación, efectos de brillo y estilos neumórficos a componentes de interfaz sin ninguna imagen.

La sintaxis completa es: `box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color`. Solo `offset-x`, `offset-y` y `color` son obligatorios; `blur-radius` y `spread-radius` tienen valor predeterminado 0 si se omiten, e `inset` tiene sombra exterior por defecto. Una sombra típica para tarjeta tiene este aspecto: `box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12)`. Apila sombras ilimitadas separándolas con comas — se renderizan de frente a atrás (la primera listada está encima). Este generador produce la declaración completa incluyendo el nombre de la propiedad `box-shadow:`, o solo el valor si lo prefieres.

El radio de desenfoque controla la suavidad del borde: cero da un borde duro y nítido que coincide exactamente con la forma del elemento; valores mayores crean un desvanecimiento progresivamente más suave y difuso. El radio de expansión hace crecer o encoger toda la sombra antes de aplicar el desenfoque: los valores positivos la expanden más allá del límite del elemento, los valores negativos la contraen hacia adentro. Las sombras de apariencia más realista usan un desenfoque moderado con una expansión ligeramente negativa, manteniendo la sombra cerca de la huella natural del elemento en lugar de extenderse demasiado. Esta es la técnica utilizada en los presets Deep y Floating.

Añade la palabra clave `inset` al inicio de la declaración de sombra: `box-shadow: inset 0px 2px 6px rgba(0, 0, 0, 0.20)`. Una sombra inset se dibuja dentro del borde del elemento en lugar de detrás de él, creando una apariencia hundida o presionada. Los usos más comunes incluyen: campos de entrada (mostrando profundidad de enfoque), pistas de interruptores toggle, estados activos de botones pulsados y contenedores de texto en relieve. Este generador tiene un interruptor Inset en el panel de control de cada capa — actívalo y la sombra cambia inmediatamente al interior del elemento en la vista previa.

Sí — CSS permite cualquier número de sombras separadas por comas en un solo elemento. Se renderizan en el orden listado, con la primera sombra encima. Apilar múltiples capas es la técnica clave para una profundidad suave y realista — una sola sombra grande se ve artificial, mientras que tres a cinco capas graduadas imitan cómo la luz se dispersa físicamente. Este generador admite hasta ocho capas independientes, cada una con su propio desplazamiento, desenfoque, expansión, color, opacidad e interruptor inset. Un icono de ojo permite mostrar/ocultar capas individuales para una comparación rápida antes/después sin eliminarlas.

El neumorfismo usa dos sombras opuestas en un elemento cuyo color de fondo coincide con la página: una sombra brillante (casi blanca) apuntando hacia la parte superior izquierda, y una oscura (negro con baja opacidad) apuntando hacia la parte inferior derecha. Esto hace que el elemento parezca extruido de la superficie de fondo. Una declaración neumórfica clásica: `box-shadow: -6px -6px 12px rgba(255,255,255,0.8), 6px 6px 12px rgba(0,0,0,0.15)`. El fondo del elemento debe coincidir exactamente con el fondo de la página para que la ilusión funcione. El preset Neumorphic de este generador proporciona un punto de partida listo — cambia el fondo de la vista previa a 'gris suave' para verlo en contexto.

Usa desplazamiento cero, un radio de desenfoque grande y un valor con color: `box-shadow: 0px 0px 20px 4px rgba(59, 130, 246, 0.5)`. El desplazamiento cero hace que el brillo irradie uniformemente en todas las direcciones. Una expansión positiva aleja más el brillo del elemento. Combinar dos capas — una con un desenfoque menor y mayor opacidad para un núcleo brillante, y otra con un desenfoque grande y menor opacidad para el halo ambiental — produce un efecto luminoso más convincente. El preset Glow Blue demuestra esto con un enfoque de dos capas. Cambia el color a cualquier tono para brillos de acento personalizados.

En lugar de una sombra grande, apila de tres a cinco capas donde cada una aproximadamente duplica el desplazamiento y el desenfoque mientras reduce la opacidad a la mitad: por ejemplo, `0px 1px 2px rgba(0,0,0,0.06), 0px 4px 8px rgba(0,0,0,0.08), 0px 12px 24px rgba(0,0,0,0.06)`. Esta técnica imita cómo la luz se dispersa físicamente desde una fuente puntual y resulta convincente a cualquier nivel de zoom o resolución de pantalla. Los presets Deep y Floating en este generador están construidos exactamente sobre este principio — tres capas graduadas que se ven naturales a cualquier escala.

`box-shadow` siempre sigue el borde rectangular del elemento, independientemente de cómo se vea visualmente el elemento. `filter: drop-shadow()` traza el contorno del canal alfa real del elemento — útil para recortes PNG transparentes o iconos SVG donde quieres que la sombra siga la forma en lugar de su rectángulo delimitador. Para los componentes estándar de interfaz (tarjetas, botones, paneles, diálogos), `box-shadow` es la opción correcta: es más rápido de renderizar, admite el modo inset, acepta radio de expansión y permite múltiples capas apiladas. Usa `filter: drop-shadow()` solo cuando el fondo transparente del elemento importa para la forma de la sombra.

No. `box-shadow` es puramente un efecto visual renderizado fuera del flujo normal del diseño. Nunca empuja elementos hermanos, nunca aumenta el área de contenido desplazable y no tiene efecto en el ancho, alto, margen o relleno calculado del elemento. Las sombras se extienden visualmente más allá del borde del elemento pero el motor de diseño las ignora. Esto significa que puedes añadir sombras generosas a una cuadrícula muy compacta sin romper el diseño — aunque quizás quieras añadir `overflow: visible` al contenedor padre para asegurarte de que la sombra no se recorte.

Una vez que hayas construido tu sombra, el generador ofrece tres formatos de salida. <strong>Copiar CSS</strong> da la declaración completa de la propiedad (`box-shadow: …;`) lista para cualquier hoja de estilos. <strong>Copiar valor</strong> da solo el valor de la sombra — útil como variable SCSS, valor de propiedad personalizada CSS o entrada de `extend.boxShadow` en Tailwind. <strong>Estilo React</strong> produce el formato camelCase (`boxShadow: '…'`) para objetos de estilo inline JSX o Styled Components. Para Tailwind, pega el valor en tu `tailwind.config.js` bajo `theme.extend.boxShadow` para crear una clase de utilidad de sombra personalizada.

La mayoría de las herramientas dedicadas de box-shadow solo ofrecen generación de una sola capa — cssgenerator.org, por ejemplo, proporciona controles básicos pero sin biblioteca de presets ni apilado multicapa. La referencia de css-tricks.com es documentación, no una herramienta interactiva. Los Generadores CSS de cssmatic.com son funcionales pero anticuados y con muchos anuncios. El generador de UtiloKit admite hasta ocho capas independientes con interruptores de ojo por capa, ocho presets curados que cubren los patrones de diseño de sombras más comunes (tarjeta, nítido, material, neumórfico, flotante, profundo, brillo, hendidura inset), tres formatos de salida para diferentes frameworks y un interruptor completo de fondo oscuro/claro para verificar contraste — todo sin anuncios y sin subida de datos.

Sí — el generador de box-shadow es completamente responsivo. En iPhone y Android, todos los controles deslizantes son táctiles con manillas de arrastre del tamaño adecuado. El elemento de vista previa en vivo se escala para adaptarse a pantallas móviles. Los selectores de color usan el selector de color nativo del sistema en navegadores móviles. El diseño de tres columnas para escritorio colapsa a un diseño vertical limpio de una sola columna en pantallas estrechas. Todos los botones de copia usan la API de Portapapeles Web, compatible con Safari, Chrome y Firefox tanto en iOS como en Android. No se requiere descarga de aplicación ni cuenta — abre la URL y empieza a diseñar.