Degradados oscuros con atmósfera: códigos intensos y sombríos

Un degradado sombrío es una mezcla oscura que se comporta como una habitación en penumbra: casi todo el encuadre está en sombra, una zona recibe la luz y los colores se contienen en lugar de forzarse. La receta es fácil de enunciar. Parte de un casi negro teñido, añade uno o dos tonos medios apagados y deja que una sola luz, a menudo cálida sobre un fondo frío, dé vida a la superficie. Abajo tienes doce códigos para copiar, y luego cómo construir el tuyo y mantener legibles las palabras encima.

Qué hace que un degradado tenga atmósfera, y no solo sea oscuro

Muchos degradados oscuros resultan planos. Un azul marino que se funde en negro es oscuro, pero no tiene clima. La atmósfera nace de unas pocas decisiones que fotógrafos y etalonadores de cine toman por instinto, y que tú puedes tomar a propósito.

• Clave baja. Aproximadamente tres cuartas partes del encuadre son sombra. La luz es la excepción, no la norma.
• Una sola fuente. La luz entra por una esquina o un borde, así el ojo sabe dónde está la ventana o la lámpara.
• Color contenido. Los tonos medios están algo agrisados. Un verde azulado polvoriento resulta más sombrío que uno vivo.
• Sombras con color. El punto más oscuro es negro azulado, negro verdoso o sangre de buey, nunca #000000.
• Contraste de temperatura. Una pequeña luz cálida en una escena fría, o al revés, crea tensión.

Doce códigos de degradado sombrío

Cada uno es un único valor CSS que puedes pegar en background. Están agrupados a grandes rasgos por temperatura: primero los fríos y tormentosos, luego los cálidos, iluminados por lámparas, y después algunos intermedios.

Si buscas algo más cercano a una noche despejada que a una tormentosa, los degradados de cielo nocturno tiran más a azul y añaden estrellas. Para un color más profundo y brillante, con más saturación, los tonos joya están un paso por encima de todo lo que hay aquí.

Una paleta sombría para construir

Cuando hagas el tuyo, trabaja con una paleta en lugar de dos colores. Cinco bastan: un fondo, dos pasos de sombra, un tono medio apagado y una luz. La luz es el único color al que se le permite brillar de verdad, y debe aparecer en una zona pequeña.

Por qué la luz cálida funciona tan bien sobre la sombra fría se explica en temperatura de color. Para más combinaciones listas, mira las paletas de colores oscuros.

Cómo hacer un degradado sombrío en CSS

1. 1

   Define un fondo teñido

   Elige un casi negro con un tono, como #0b0d12 para negro azulado o #120806 para negro marrón cálido. Úsalo también como background-color de reserva.

2. 2

   Añade el cuerpo de sombra

   Pon un degradado lineal suave entre dos pasos oscuros del mismo tono. Esto da profundidad al encuadre antes de que llegue ninguna luz.

3. 3

   Coloca una luz

   Añade un degradado radial en una esquina que se funda a transparent hacia el 40 por ciento. Mantén su color apagado y su opacidad muy por debajo del máximo.

4. 4

   Añade una contraluz fría

   Opcionalmente, un segundo radial, más grande y más tenue, en la esquina opuesta y en la familia fría. Evita que el lado en sombra quede muerto.

5. 5

   Termina con grano

   Una capa de ruido fino con poca opacidad oculta las bandas y da a la superficie aspecto de película. Degradados con grano tiene el código.

.moody {
  background-color: #0b0d12; /* tinted ground and fallback */
  background-image:
    radial-gradient(circle at 78% 18%, rgba(201, 138, 58, 0.5) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 100%, rgba(31, 58, 68, 0.8) 0%, transparent 55%),
    linear-gradient(165deg, #151a22 0%, #0b0d12 100%);
}

Poner palabras sobre un fondo sombrío

El texto claro sobre fondo oscuro se lee bien, hasta que cruza ese único foco de luz que tanto te ha costado. Planifica el titular en el lado de la sombra y aleja la luz de las palabras en lugar de ponerla detrás. Un blanco roto suave, como #ece6dc, se asienta mejor sobre un fondo sombrío que el blanco puro, que puede resultar duro.

Esa versión de la derecha es lo que hace un Mark de Gradiently por sí solo: sabe dónde están las palabras, intensifica el color cerca de las letras y elige texto claro u oscuro en cada línea a partir de su propia paleta, sin añadir cajas ni sombras. Texto sobre un degradado cubre la versión manual.

Dónde funcionan mejor los degradados sombríos

Encajan con la noche, la música, las bebidas, el cine, la perfumería y el lujo discreto. Encajan mucho menos con una fiesta infantil o unas rebajas de verano. Para una interfaz entera en este registro, fondos degradados oscuros explica el cuidado extra que necesitan las pantallas.

Si prefieres no ajustar capas a mano, el Mercado tiene Marks vivos exactamente en este registro, que puedes buscar con palabras como «verde azulado profundo» o «sangre de buey». Puedes diseñar gratis con cualquier Mark sin reservar, y reservar uno significa que ningún otro póster llevará la misma atmósfera.