La propiedad box-shadow de CSS permite proyectar sombras sobre los elementos de una página web para estructurar la jerarquía visual y definir la profundidad de la interfaz. El Generador de Sombras CSS proporciona un entorno visual interactivo para configurar y apilar estas sombras mediante controles deslizantes, generando el código de forma inmediata.
Estructura y parámetros de la propiedad box-shadow
Para diseñar una sombra de forma precisa, es necesario comprender cómo interactúan los diferentes valores numéricos que componen la propiedad en CSS. El generador permite manipular cada uno de estos parámetros de manera independiente para cada capa:
- Offset horizontal (Desplazamiento en el eje X): Define la posición de la sombra hacia los lados. Un valor positivo desplaza la sombra hacia la derecha, mientras que un valor negativo la desplaza hacia la izquierda. El rango de ajuste permitido en la herramienta va desde -50px hasta 50px.
- Offset vertical (Desplazamiento en el eje Y): Controla la posición de la sombra hacia arriba o hacia abajo. Los valores positivos mueven la sombra hacia abajo y los valores negativos la desplazan hacia arriba. El rango disponible es de -50px a 50px.
- Blur (Difuminado): Determina la nitidez de los bordes de la sombra. Con un valor de 0px, la sombra presenta un borde completamente sólido y definido. A medida que se incrementa el valor (hasta un límite de 100px en esta herramienta), los bordes se suavizan y se dispersan, emulando una fuente de luz más difusa.
- Spread (Expansión): Modifica el tamaño de la sombra antes de que se aplique el difuminado. Un valor positivo expande la sombra hacia fuera en todas las direcciones, mientras que un valor negativo la contrae hacia dentro. El rango de configuración se sitúa entre -50px y 50px. Un spread negativo es especialmente útil para recortar la sombra y evitar que sobresalga por los laterales del elemento.
- Color y Opacidad: Permiten definir el tono de la sombra mediante un selector de color y ajustar su nivel de transparencia para lograr una integración natural con el fondo del diseño.
Sombras exteriores frente a sombras interiores (inset)
Por defecto, las sombras se proyectan hacia el exterior del elemento, lo que genera la percepción visual de que el objeto está elevado o flotando sobre la superficie del fondo.
Al activar la opción Sombra interior (inset), el comportamiento se invierte por completo. La sombra se proyecta hacia el interior de los límites del elemento, creando un efecto de hundimiento o profundidad negativa. Esta técnica es habitual en el diseño de interfaces para representar elementos interactivos en un estado específico, como campos de formulario incrustados o botones que han sido presionados.
Creación de profundidad mediante el apilamiento de capas
En el diseño de interfaces moderno, una única capa de sombra a menudo resulta plana o artificial. Para imitar el comportamiento real de la luz, se recurre al apilamiento de múltiples capas de sombra.
El generador pre-renderiza cinco capas de sombra. La primera capa cuenta con unos valores por defecto de 0 8 24 -4 (expresados en el orden: offset horizontal, offset vertical, blur y spread) con un color negro y una opacidad del 18%. Las cuatro capas restantes se encuentran inicialmente ocultas, pero pueden activarse y configurarse de manera independiente.
Al combinar varias capas, se pueden asignar diferentes funciones a cada una:
- Una capa con un blur reducido y un spread negativo para definir la base física y el contacto del elemento con el suelo.
- Una segunda capa con un blur más amplio y mayor opacidad para simular la dispersión de la luz ambiental a media distancia.
- Capas adicionales con opacidades muy bajas para suavizar la transición de la sombra sobre fondos claros.
Cuando se trabaja con múltiples capas, el generador concatena automáticamente los valores en una única declaración de CSS, separando cada capa mediante comas.
Casos de uso comunes en el diseño web
La combinación de los parámetros de desplazamiento, difuminado y expansión permite resolver diferentes necesidades de diseño en una interfaz:
- Sombra ajustada y sutil: Ideal para tarjetas de contenido o contenedores que deben diferenciarse del fondo sin sobrecargar la interfaz. Se logra con offsets pequeños (de 1px a 3px), un blur moderado y, opcionalmente, un spread negativo para contener la dispersión.
- Sombra suave y amplia: Utilizada en elementos emergentes, menús desplegables o ventanas modales que requieren una separación visual drástica del plano de fondo. Requiere valores de blur elevados y offsets verticales más pronunciados.
- Efecto de elemento presionado: Se consigue activando la opción Sombra interior (inset) junto con un offset vertical positivo para simular que la luz superior bloquea la parte interna superior del elemento.
Procesamiento local y privacidad
La configuración de las sombras y la generación del código CSS correspondiente se realizan de manera local. Cada sombra se procesa en tu navegador y nada de lo que configures aquí se sube a BroBroGo. Esto garantiza que los parámetros de diseño y los esquemas de color utilizados no se transmitan a servidores externos durante el uso de la herramienta.
Preguntas frecuentes
¿Qué controlan realmente el offset, el blur y el spread?
El offset mueve la sombra a los lados y arriba o abajo, el blur suaviza sus bordes, y el spread la agranda o encoge antes de aplicar el blur. Un spread negativo encoge la sombra hacia dentro, útil para una sombra ajustada y cercana.
¿Qué hace la opción inset?
Una sombra normal cae fuera del elemento, como la luz detrás de una tarjeta elevada. Con inset se invierte hacia dentro, así el elemento parece hundido — útil para campos hundidos o botones presionados.
¿Por qué apilar más de una capa de sombra?
A partir de cierto tamaño, una sola sombra se ve plana. La elevación real suele combinar una sombra ajustada y oscura con otra suave y más amplia: añade una segunda capa y ajusta cada una por separado para lograrlo.