Generador de sombras de caja CSS

Cómo usar el generador de sombras de caja CSS

1. Establecer desplazamiento X e Y — Arrastre los deslizadores de desplazamiento horizontal y vertical para posicionar la sombra con respecto al elemento. X positivo mueve la sombra hacia la derecha; negativo la mueve hacia la izquierda. Y positivo la mueve hacia abajo; negativo la mueve hacia arriba.
2. Ajustar el radio de desenfoque — Valores de desenfoque más altos producen sombras más suaves y difusas. Un desenfoque de 0 da una sombra nítida y de bordes duros.
3. Controlar el radio de expansión — La expansión expande o contrae la sombra más allá de las dimensiones del elemento. Los valores positivos hacen la sombra más grande; los valores negativos la encogen.
4. Elegir el color y la opacidad de la sombra — Seleccione cualquier color con el selector de color y use el deslizador de opacidad para controlar la transparencia. Las sombras semitransparentes (por ejemplo, rgba con alfa bajo) se ven más naturales en la mayoría de los fondos.
5. Activar sombra interior — Marque la opción "Interior" para invertir la sombra dentro del elemento, creando un efecto de relieve o hundido.
6. Aplicar un ajuste preestablecido — Haga clic en cualquiera de los ajustes preestablecidos listos para usar para estilos de sombra clásicos instantáneos.
7. Copiar el código CSS — Presione "Copiar" para copiar la declaración `box-shadow` generada a su portapapeles.

Entendiendo la propiedad `box-shadow` de CSS

box-shadow: [inset] offset-x offset-y [blur] [spread] color;

• offset-x — Distancia horizontal de la sombra desde el elemento.
• offset-y — Distancia vertical de la sombra desde el elemento.
• blur-radius — La suavidad de los bordes de la sombra. Cero significa nítido.
• spread-radius — Controla cuánto se expande o contrae la sombra.
• color — Cualquier color CSS válido (HEX, RGB, RGBA, HSL). Se recomienda RGBA porque permite el control de opacidad en un solo valor.
• inset — Palabra clave opcional que invierte la dirección de la sombra, colocándola dentro del borde del elemento.

Ajustes preestablecidos de sombra de caja — Cuándo usar cada estilo

Sombra exterior vs. Sombra interior — ¿Cuál es la diferencia?

• Sombra exterior crea la ilusión de que un elemento está elevado sobre la superficie de la página — ideal para tarjetas, botones y contenedores.
• Sombra interior hace que un elemento parezca hundido o presionado en la página — comúnmente usado para estados de botón activos, campos de entrada de texto y pozos.

Consejos para sombras de caja CSS de aspecto natural

• Use colores **RGBA** con baja opacidad (0.10–0.20) en lugar de colores completamente opacos.
• Alinee la dirección de la sombra consistentemente en una página (típicamente hacia abajo y ligeramente a la derecha, simulando una fuente de luz superior izquierda).
• Apile múltiples sombras para una profundidad más realista (sombra suave y amplia + sombra oscura y ajustada).
• Evite valores de desenfoque excesivamente grandes en elementos pequeños — se ven desproporcionados.
• Las sombras de colores (por ejemplo, un brillo azul en un botón azul) son una técnica de diseño moderna para una profundidad consistente con la marca.

CSS `box-shadow` vs. `filter: drop-shadow()` — Diferencias clave

• `box-shadow` respeta el cuadro delimitador rectangular del elemento independientemente de la transparencia.
• `drop-shadow()` sigue la forma visible real de un elemento (incluidos los PNG transparentes).
• `box-shadow` admite `inset`; `drop-shadow()` no.
• `box-shadow` admite múltiples capas apiladas; `drop-shadow()` no.

Soporte del navegador y compatibilidad entre navegadores

Casos de uso comunes para sombras de caja CSS

• Componentes de UI de tarjetas — Elevar tarjetas sobre el fondo de la página.
• Barras de navegación — Añadir una sombra inferior para crear profundidad en el encabezado.
• Botones — Simular un efecto de pulsación 3D en estados `hover`/activos.
• Modales y diálogos — Separar superposiciones del fondo.
• Entradas de formulario — Brillo interior en estado de enfoque para accesibilidad y UX.
• Imágenes — Enmarcar fotos o miniaturas con un sutil borde de sombra.
• Tooltips — Elementos de micro-UI flotantes con una sutil sombra proyectada.