# Degradados en modo oscuro: profundidad sin deslumbrar

[Canonical HTML page](https://gradiently.design/es/guide/dark-mode-gradients)

Un degradado que brilla con discreción sobre blanco puede arder en una pantalla oscura. Así se reajustan los degradados para el modo oscuro y conservan su profundidad, con CSS para prefers-color-scheme, light-dark() y un selector manual.

## The short version

- Los degradados en modo oscuro deben rediseñarse para el tema oscuro, porque los mismos colores saturados que se ven equilibrados sobre blanco resultan duros y deslumbrantes sobre un fondo oscuro.
- Sobre fondos oscuros, baja el croma de los colores del degradado, limita el color vivo a zonas pequeñas y usa un casi negro tintado hacia el tono de tu marca en lugar de negro puro.
- Cambia los degradados entre temas guardando sus colores en propiedades personalizadas de CSS y redefiniéndolos dentro de una media query prefers-color-scheme: dark.
- La función CSS light-dark() elige entre dos colores según el color-scheme activo, lo que mantiene ambos valores uno junto al otro.
- Los degradados oscuros forman bandas más visibles que los claros, así que vale la pena añadir una capa ligera de grano en modo oscuro.

Los **degradados en modo oscuro** se ven mejor cuando les das sus propios colores en lugar de reutilizar los del tema claro. Sobre un fondo oscuro el ojo se adapta y cada color saturado parece más brillante, así que un degradado que resultaba tranquilo sobre blanco empieza a deslumbrar. Baja el croma, limita el color vivo a zonas pequeñas, tinta el fondo en lugar de usar negro puro y cambia los valores con `prefers-color-scheme` o `light-dark()`. La profundidad se queda; el deslumbramiento se va.

## Por qué los degradados del tema claro fallan en oscuro

Cuando la página se vuelve oscura cambian tres cosas. Las zonas grandes y luminosas pasan a ser lo más brillante de la habitación, y se leen como deslumbramiento y no como color. Las sombras dejan de funcionar, así que los degradados que daban profundidad oscureciendo los bordes la pierden. Y los saltos entre tonos oscuros se ven con más facilidad, de modo que los degradados sutiles empiezan a formar bandas. [Diseño en modo oscuro](https://gradiently.design/es/guide/dark-mode-design) cubre el tema en general; esta página trata de los degradados.

- Cabecera del tema claro: `linear-gradient(135deg, #ede9fe 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Oscuro ingenuo: saturación total: `linear-gradient(135deg, #7c3aed 0%, #db2777 100%)`
- Oscuro ajustado: luz desde una esquina: `radial-gradient(circle at 80% 15%, #4c1d95 0%, #1a1530 45%, #0b0a14 85%)`

El mismo degradado de marca de tres formas. El del centro es lo que pasa cuando simplemente se oscurece un diseño claro: chillón, plano, cansado. El último conserva el violeta, pero lo deja brillar desde una esquina sobre un fondo tintado.

## Cinco reglas para degradados en modo oscuro

1. **Tinta el fondo** Usa un casi negro que tienda hacia tu tono, como `#0b0a14` para marcas violetas, en lugar de `#000000`. El negro puro hace que el color parezca pegado encima.
2. **Baja el croma** Reduce la saturación aproximadamente un tercio en las zonas grandes. En OKLCH, mantén el tono y reduce el valor C.
3. **Reduce la parte luminosa** Deja que el color vivo ocupe una esquina o un resplandor, y que la mayor parte de la superficie se quede cerca del fondo.
4. **Eleva, no sombrees** Muestra la elevación con superficies algo más claras y degradados que se aclaran hacia arriba, porque las sombras desaparecen sobre fondos oscuros.
5. **Añade grano** Un ruido fino rompe los saltos visibles de las mezclas oscuras. [Degradados con grano](https://gradiently.design/es/guide/grainy-gradients) tiene la receta.

- Fondo: #0b0a14
- Superficie: #1a1530
- Elevado: #2a2148
- Violeta profundo: #4c1d95
- Acento: #8b5cf6
- Acento de texto: #c4b5fd

Un juego de degradado oscuro para una marca violeta. Casi toda la pantalla usa los tres primeros; el acento aparece en lugares pequeños y el lila pálido queda reservado para texto e iconos.

## Cambiar degradados con prefers-color-scheme

Guarda en propiedades personalizadas los colores del degradado, no degradados completos. Así el tema oscuro solo tiene que redefinir los colores, y todos los componentes que los usan se actualizan. Es el mismo patrón que se describe en [variables CSS para temas](https://gradiently.design/es/guide/css-custom-properties-theming).

```css
:root {
  color-scheme: light dark;
  --ground: #faf8ff;
  --glow: #c4b5fd;
  --glow-2: #f9a8d4;
  --hero: radial-gradient(circle at 80% 15%, var(--glow) 0%, transparent 45%),
          radial-gradient(circle at 10% 90%, var(--glow-2) 0%, transparent 50%),
          var(--ground);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b0a14;
    --glow: #4c1d95;
    --glow-2: #1e3a8a;
  }
}

.hero {
  background: var(--hero);
}
```

Como --hero y sus colores viven en el mismo elemento, redefinir los colores en la media query actualiza el degradado en todos los sitios donde se usa. color-scheme también indica al navegador que oscurezca las barras de desplazamiento y los controles de formulario.

Fíjate en que los resplandores oscuros son más profundos, no más brillantes. Sobre un fondo oscuro, a un color le basta con ser un poco más claro que su entorno para leerse como luz.

### Usar light-dark()

La función `light-dark()` devuelve su primer color en un esquema claro y el segundo en uno oscuro. Necesita `color-scheme: light dark` en el elemento o en un ancestro, y funciona en las versiones actuales de Chrome, Edge, Safari y Firefox. Mantiene ambos valores en una sola línea, lo que facilita revisar una paleta.

```css
:root {
  color-scheme: light dark;
}

.card {
  background: linear-gradient(
    180deg,
    light-dark(#ffffff, #1a1530) 0%,
    light-dark(#f5f3ff, #0b0a14) 100%
  );
  color: light-dark(#1e1b2e, #e9e5f5);
}
```

En los navegadores actuales light-dark() admite colores, no imágenes, así que úsalo en cada parada y no en el degradado completo.

### Admitir un selector de tema manual

Muchos sitios permiten anular la configuración del sistema. Pon la elección en el elemento raíz y limita tus variables a ella. La media query se encarga del valor por defecto; el atributo manda cuando alguien elige.

```css
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0b0a14;
  --glow: #4c1d95;
  --glow-2: #1e3a8a;
}

:root[data-theme="light"] {
  color-scheme: light;
}
```

Fijar color-scheme a un solo valor también hace que light-dark() siga al selector.

## Reajustar un degradado para el modo oscuro

Aquí tienes el mismo degradado de marca ajustado parada a parada. Trabajar en OKLCH lo hace predecible, porque la luminosidad y el croma son números separados; [OKLCH explicado](https://gradiently.design/es/guide/oklch-explained) muestra por qué.

| Parada | Tema claro | Tema oscuro | Cambio |
| --- | --- | --- | --- |
| Fondo | `oklch(98% 0.01 295)` | `oklch(15% 0.03 295)` | Casi negro tintado, no negro |
| Principal | `oklch(85% 0.09 295)` | `oklch(35% 0.15 295)` | Más oscuro, con croma moderado |
| Acento | `oklch(84% 0.10 350)` | `oklch(40% 0.12 265)` | Desplazado hacia lo frío para evitar un rosa ardiente |
| Acento de texto | `oklch(45% 0.20 295)` | `oklch(82% 0.09 295)` | Más claro y suave para texto pequeño |

El tono de los colores principales no se mueve, así que la marca sigue siendo reconocible en ambos temas.

Cabecera del tema oscuro, en OKLCH: `radial-gradient(circle at 80% 15%, oklch(35% 0.15 295) 0%, transparent 45%), radial-gradient(circle at 10% 90%, oklch(40% 0.12 265) 0%, transparent 50%), linear-gradient(oklch(15% 0.03 295), oklch(15% 0.03 295))`

Los valores oscuros de la tabla, en capas. Cópialo y retoca el croma hasta que el resplandor se sienta cálido y no brillante.

## Texto sobre degradados oscuros

El texto claro sobre un degradado oscuro suele tener contraste de sobra, pero compruébalo donde el degradado es más brillante, no donde es más oscuro. Un titular en `#e2e8f0` sobre `#0b0a14` queda muy por encima del 4,5:1 que WCAG pide para el texto; el mismo titular sobre un resplandor violeta intenso quizá no. Evita también el texto blanco puro en párrafos sobre casi negro: un contraste muy alto provoca halos para algunos lectores, así que un blanco roto suave es más amable. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) tiene las cifras.

### Evita en modo oscuro

- Fondo negro puro con paradas saturadas
- El degradado del tema claro, oscurecido
- Zonas grandes de color neón
- Párrafos en blanco puro
- Degradados oscuros lisos sin grano

### Haz

- Un fondo casi negro tintado
- Un juego aparte de paradas oscuras
- El color como luz desde una esquina
- Texto blanco roto, alrededor de `#e9e5f5`
- Una capa de ruido fino para ocultar las bandas

Para más paletas oscuras, [fondos degradados oscuros](https://gradiently.design/es/guide/dark-gradient-backgrounds) tiene una serie para copiar. Y en publicaciones para redes y presentaciones, donde no puedes probar cada línea a mano, la tinta automática de Gradiently elige texto claro u oscuro línea a línea a partir de la propia paleta del Mark, y el Mark coloca su zona más tranquila detrás de las palabras, así que un diseño oscuro nunca pone un titular sobre su resplandor más brillante.

## FAQ

### ¿Cómo cambio un degradado en modo oscuro?

Pon los colores del degradado en propiedades personalizadas de CSS y redefínelos dentro de `@media (prefers-color-scheme: dark)`. El degradado se actualiza allí donde use esas variables.

### ¿Puedo usar light-dark() dentro de un degradado?

Sí, en cada parada de color, porque light-dark() devuelve un color. Necesita `color-scheme: light dark` en el elemento o en un ancestro.

### ¿Por qué mis degradados se ven demasiado brillantes en modo oscuro?

La vista se adapta a las pantallas oscuras, así que los colores saturados parecen más fuertes. Baja el croma, oscurece las paradas y limita el color vivo a zonas pequeñas.

### ¿El modo oscuro debe usar negro puro?

En degradados, normalmente no. Un casi negro tintado hacia el tono de tu marca hace que los colores se fundan con naturalidad y reduce el contraste duro.

### ¿Por qué mi degradado oscuro muestra franjas?

Los tonos oscuros están muy juntos en color de 8 bits, así que los saltos se hacen visibles. Añade una capa ligera de grano y evita una compresión fuerte.