Sombras en UI: por qué la sombra negra al 25% se ve mal y las sombras en capas que conviene usar
Una sombra negra al 25% parece una mancha bajo la tarjeta. Por qué las sombras suaves usan cerca de un 8% de opacidad, dos capas y un tinte, cómo debe crecer la elevación y cuatro tokens de sombra listos en CSS.
La sombra a la que recurren casi todos los diseñadores es negro al 25%. Con esa intensidad no parece luz. Parece una mancha bajo la tarjeta.
Una buena sombra es casi invisible: sientes la elevación antes de ver la sombra. Así se consigue, con cuatro tokens para copiar.
Por qué la sombra por defecto parece una mancha
La sombra paralela por defecto de Figma es negra al 25% de opacidad, con desplazamiento de 4 hacia abajo. Dos tutoriales comunes la repiten, así que se propaga: el valor por defecto de una herramienta se convierte en una decisión de diseño que nadie tomó.
Una sombra real es suave. La luz envuelve el objeto, así que el borde de la sombra se desvanece poco a poco, y la sombra se vuelve más tenue cuanto más lejos está del objeto. Una sola capa oscura y dura no tiene nada de eso. Tiene un borde y una intensidad, y el ojo la lee como suciedad, una mancha gris, no como una superficie elevada.
Arreglo 1: 8 por ciento, no 25
Negro al 25%
Negro al 8%, desenfoque más amplio
A medida que crece el desenfoque, la misma cantidad de sombra se reparte en un área mayor, así que se aclara sola. Por eso una sombra amplia al 8 por ciento se ve más natural que una ajustada al 8 por ciento. Empieza en 8 por ciento y súbela solo si la tarjeta desaparece sobre tu fondo.
Arreglo 2: apila dos sombras
Una sola sombra tiene que hacer dos trabajos y no hace bien ninguno. Dos sombras se los reparten.
La ajustada queda justo bajo el borde y dice "esto toca la superficie". La amplia es el halo suave que dice "esto está despegado de ella". Juntas parecen una sola sombra natural, porque eso es lo que hace la luz real: una línea oscura de contacto más una caída amplia y tenue.
En CSS las dos capas son una sola declaración, separadas por una coma:
box-shadow:
0 1px 2px rgba(27, 21, 48, 0.06),
0 8px 24px rgba(27, 21, 48, 0.08);
Arreglo 3: tíñela, no la agrises
Negro puro
Teñida con la tinta
La regla es usar tu tinta, el color más oscuro de tu paleta, como color de la sombra, con baja opacidad. En nuestros propios tokens la tinta es #1B1530, un violeta muy oscuro. Sobre una página blanca el tinte apenas se nota. Sobre una página de color, un panel de marca o una sección teñida, es la diferencia entre una sombra que pertenece y una que parece pegada.
Arreglo 4: más alto significa más grande
Cuando algo está más alto, un menú sobre una tarjeta, un modal sobre una página, su sombra se vuelve más grande y suave, porque la luz tiene más espacio para extenderse. No se vuelve más oscura. Un diseñador que oscurece la sombra de lo más alto acaba otra vez en la mancha.
Eso da un conjunto pequeño y cerrado de tokens:
| Token | Capa 1 | Capa 2 | Úsalo para |
|---|---|---|---|
| XS | 0 1px 2px, 6% | ninguna | Inputs, chips pequeños |
| SM | 0 1px 2px, 6% | 0 2px 6px, 8% | Tarjetas en reposo |
| MD | 0 1px 2px, 6% | 0 8px 24px, 8% | Tarjetas elevadas, popovers |
| LG | 0 2px 4px, 6% | 0 16px 40px, 12% | Modales, menús sobre todo lo demás |
Todas las capas usan X 0 y spread 0, coloreadas con la tinta #1B1530. Los campos X, Y, blur y spread de Figma se corresponden directamente con los cuatro números de box-shadow en CSS.
Los tokens en CSS
:root {
--shadow-xs: 0 1px 2px rgba(27, 21, 48, 0.06);
--shadow-sm: 0 1px 2px rgba(27, 21, 48, 0.06),
0 2px 6px rgba(27, 21, 48, 0.08);
--shadow-md: 0 1px 2px rgba(27, 21, 48, 0.06),
0 8px 24px rgba(27, 21, 48, 0.08);
--shadow-lg: 0 2px 4px rgba(27, 21, 48, 0.06),
0 16px 40px rgba(27, 21, 48, 0.12);
}
.card { box-shadow: var(--shadow-md); }
Estos cuatro son nuestra recomendación, no un valor de plataforma. Cambia el color de tinta por el tono más oscuro de tu marca y conserva la estructura.
Dónde dejan de funcionar las sombras: el modo oscuro
Sombra sobre oscuro
Superficie más clara
Así que en un tema oscuro, eleva una capa aclarándola, no sombreándola. Nuestro paper sobre sistemas de color para modo oscuro cubre la rampa de superficies, y color de fondo en modo claro cubre los grises del otro lado.
La prueba de entrecerrar los ojos
Entrecierra los ojos ante la pantalla, o aléjate de ella. Si aún ves cada sombra como una forma oscura, es demasiado fuerte. Si los bordes de la tarjeta desaparecen en tu peor monitor, sube la opacidad un escalón. La sombra correcta desaparece cuando la miras directamente y se nota cuando la quitas.
FAQ
¿Cuál es la mejor sombra paralela para UI?
Dos capas apiladas en un tinte oscuro de tu propia tinta: una ajustada como 0 1px 2px al 6 por ciento, y una amplia como 0 8px 24px al 8 por ciento. Se lee como luz natural y no como una mancha.
¿Qué opacidad debe tener una sombra en UI?
Nuestros cuatro tokens van del 6 al 12 por ciento. Empieza en 8 por ciento para una tarjeta y súbela solo si el borde desaparece. El negro al 25 por ciento, un valor por defecto común, rara vez es correcto en una interfaz limpia.
¿Cuál es la sombra paralela por defecto de Figma?
Negro (#000000) al 25 por ciento de opacidad, con un desplazamiento de 4 hacia abajo. Es un punto de partida de la herramienta, no una decisión de diseño, así que la mayoría de los diseños mejoran al cambiarla.
¿Deben las sombras ser negro puro?
No. Usa una versión muy oscura del color de tu marca o de tu tinta. Sobre un fondo de color, el negro puro vuelve la sombra gris y sucia, mientras que una sombra teñida mantiene el color limpio.
¿Cómo muestro la elevación con sombras?
Haz que la sombra del elemento más alto sea más grande y suave, no más oscura. Usa un conjunto pequeño de tokens, como XS, SM, MD y LG, para que cada capa de la interfaz use una de cuatro sombras.
¿Funcionan las sombras en modo oscuro?
Mal. Queda poco fondo claro que oscurecer, así que las sombras grandes desaparecen. Eleva una capa dándole un color de superficie más claro.
¿Cómo escribo un box-shadow en capas en CSS?
Enumera las capas en una sola declaración box-shadow, separadas por comas: box-shadow: 0 1px 2px rgba(27,21,48,.06), 0 8px 24px rgba(27,21,48,.08);.
Fuentes
- La sombra paralela por defecto de Figma es #000000 al 25% de opacidad, X 0, Y 4. Los tutoriales coinciden en el negro al 25%; discrepan en el desenfoque por defecto, así que este paper nunca lo menciona.
- #00000040 es #000000 al 25% en hex de 8 dígitos (0x40 es 64 de 255, cerca del 25%).
- Los cuatro tokens y la tinta #1B1530 (violeta 900) son nuestros estilos de efecto de UX Brainy. Son una recomendación, no un valor de plataforma.
- Las tarjetas de arriba son ejemplos propios. La demo del tinte usa #4E2FB3 al 16 por ciento junto a negro al 16 por ciento.
- Más posts de una sola regla como este en UX Brainy.
Want a design system where shadows, spacing and color are decided once and used everywhere? Our team designs and builds product UI on tokens.
Get Started
