Diseñar profundidad con sombras CSS
Qué hace este generador
Las sombras en CSS tienen dos variantes. box-shadow dibuja una sombra alrededor del marco rectangular de un elemento —un div, un botón o una tarjeta— mientras que text-shadow proyecta la sombra detrás de cada letra del texto. Este generador ofrece un editor visual para ambas: ajustas con controles deslizantes el desplazamiento horizontal y vertical, el desenfoque (blur), la expansión (spread), el color y la opacidad, y la vista previa se redibuja en cuanto cambias un valor. Cuando el resultado te convence, el CSS correspondiente queda escrito listo para copiar.
En lugar de adivinar los píxeles a mano, moldeas la sombra sobre una caja, un botón, una tarjeta o un título reales y recuperas la declaración exacta de box-shadow o text-shadow.
Cuándo conviene usarlo
Recurre a box-shadow cuando un elemento debe parecer despegado de la página: la elevación estilo Material de una tarjeta, un menú flotante suave o el aspecto hundido de un botón pulsado. text-shadow es la herramienta para la tipografía: una sombra tenue que separa un titular de un fondo cargado, o un resplandor de color detrás del nombre de una marca.
También es una vía rápida para reproducir un diseño existente. Carga un preajuste como Material, Raised, Floating o Glow como punto de partida y luego afina los desplazamientos y la opacidad hasta que la sombra coincida con el mock-up que estás replicando.
Ejemplo: una box-shadow en capas
Una sola sombra se lee así: box-shadow: 0 4px 6px rgba(0,0,0,0.1); —sin desplazamiento horizontal, 4px hacia abajo, 6px de desenfoque y un negro translúcido y claro. Para transmitir profundidad real, apila dos: una sombra estrecha y oscura pegada al elemento más otra más ancha y suave alejada. Al añadir una capa, la herramienta las une con una coma: box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);. Cada capa conserva sus propios desplazamientos, desenfoque, expansión y color.
Detalles y casos límite
Offset X e Y desplazan la sombra a la derecha y hacia abajo (los valores negativos la llevan a la izquierda y arriba), el blur suaviza el borde y el spread agranda o encoge la sombra antes de aplicar el desenfoque, una propiedad que text-shadow no admite. Al activar Inset, la sombra se invierte hacia dentro, que es lo que da su aspecto a los botones pulsados y a los campos de entrada hundidos. Mantén ligeras las sombras de texto: un desenfoque intenso o una opacidad alta detrás de las letras perjudican la legibilidad. Cuando estés conforme, copia el CSS con un clic o descárgalo para pegarlo directamente en tu hoja de estilos.