Guía de Fondos Dark Mode para SaaS: Cómo aplicar el efecto "Glow" con degradados sutiles

Rellenar el fondo con #000000 también dispara el contraste contra los textos blancos. Las interfaces modernas resuelven esto utilizando luz ambiental direccionada: degradados oscuros que simulan una fuente de iluminación sutil detrás de los elementos clave de la interfaz.

/* Deep Ocean – degradados.com */
.gradient-element {
  background: radial-gradient(
    circle at 50% 30%,
    #38bdf8 0%,
    #0284c7 35%,
    #1e3a8a 70%,
    #0f172a 100%
  );
}

#Por qué usar tonos base como #0F172A en lugar de negro puro

El ojo humano percibe mayor profundidad cuando las sombras contienen un matiz cromático frío. Si observas la arquitectura de color de nuestra colección fría y marina, el tono de anclaje final no es negro, sino un azul pizarra profundo (#0F172A).

Ventajas de partir de una base oscura matizada:

• Armonía con bordes translúcidos: los bordes border-white/10 se funden de manera orgánica sobre tonos azules o violetas profundos.
• Transiciones sin manchas grises: al interpolar un azul brillante (#38BDF8) hacia #0F172A, todos los pasos intermedios conservan riqueza cromática.

#Anatomía de una luz ambiental con radial-gradient

Para que un fondo oscuro funcione detrás de una tarjeta o vista móvil sin distraer de la lectura, el centro de luz nunca debe quedar exactamente en la mitad de la pantalla (50% 50%).

En la muestra Deep Ocean, desplazamos el centro de radiación hacia el tercio superior (circle at 50% 30%):

/* Deep Ocean – degradados.com */
.gradient-element {
  background: radial-gradient(
    circle at 50% 30%,
    #38bdf8 0%,
    #0284c7 35%,
    #1e3a8a 70%,
    #0f172a 100%
  );
}

• Del 0% al 35% (#38bdf8 a #0284c7): crea el punto de atención visual (Glow) ideal para destacar un icono, notificación o encabezado superior.
• Del 70% al 100% (#1e3a8a a #0f172a): oscurece progresivamente la mitad inferior del contenedor, garantizando un lienzo oscuro y estable donde el texto blanco o celeste claro se lee con nitidez total.

#Reglas de contraste (WCAG) sobre fondos con degradado

Cuando coloques tipografía encima de un contenedor con degradado, verifica siempre el contraste contra el punto más claro del degradado que toque el texto, no contra el color más oscuro:

• Títulos principales: usa blanco puro (#FFFFFF) o grises casi blancos (#F8FAFC).
• Metadatos y etiquetas secundarias: utiliza transparencia (rgba(255, 255, 255, 0.7)) o toma el tono más luminoso de la propia paleta (como #38BDF8) sobre la zona más oscura del fondo (#0F172A) para mantener cohesión cromática.

Descubre más combinaciones listas para producción en nuestras colecciones de Oscuros (Dark Mode), Degradados Azules y Degradados Morados.