Duotone CSS gradients para interfaces modernas

Los gradients duotono son una de las formas mas simples de dar identidad visual sin llenar la interfaz de ruido. Trabajas con dos colores principales y controlas el resultado con angulo, contraste y transparencia.

Por que funciona

• da direccion visual clara;
• mantiene consistencia de marca;
• facilita decisiones en design systems;
• suele envejecer mejor que gradients demasiado complejos.

Donde encaja mejor

Funciona especialmente bien en:

• hero sections;
• cards promocionales;
• widgets de dashboard;
• banners;
• fondos de CTA.

Que vigilar

El duotono deja de verse bien cuando:

• los dos colores pelean demasiado;
• el contraste del texto cae;
• se usa en demasiadas superficies a la vez;
• el gradient parece mas importante que el contenido.

Base practica

background: linear-gradient(135deg, rgba(96, 165, 250, 0.95), rgba(244, 114, 182, 0.88));

Con eso suele bastar para una base fuerte. Luego ajustas opacidad y direccion segun el bloque.

Cierre

El duotono bueno no va de hacer el gradient mas llamativo. Va de mantenerlo simple y util.

Si el bloque gana tono e identidad sin perder legibilidad, ya esta haciendo su trabajo.