¿Cómo genero un gradiente CSS limpio para una web?
Generador de gradientes CSS: lineal, radial, cónico, con interpolación opcional en OKLCH (perceptualmente uniforme) en lugar de sRGB.
La gran ventaja: los gradientes mezclados en OKLCH evitan el punto medio gris turbio habitual en sRGB: azul→amarillo en sRGB pasa por un gris turbio, en OKLCH pasa por un cian/verde limpio.
Elige el tipo, fija paradas y ángulo y obtén código CSS y Tailwind listo. Todo en local.
Cómo usarlo
- Elige un tipo: Lineal (línea), Radial (desde el centro), Cónico (alrededor de un ángulo, como un reloj). Lineal y Cónico tienen un deslizador de ángulo 0-360°.
- Cada parada lleva: color (HEX, picker nativo), posición 0-100%, X para eliminar. Pulsa "Añadir parada": el generador inserta una nueva en el hueco mayor. Máximo 8 paradas.
- Elige la interpolación: sRGB (clásica, a veces con puntos medios turbios) u OKLCH (perceptual, más limpia). Deja OKLCH para trabajo de producción.
- CSS y Tailwind se regeneran en vivo. Pulsa "Copiar" para llevarte el snippet.
- Seis presets abajo (Sunset, Ocean, Forest, Aurora, Ice, Mono) para arrancar rápido.
Cuándo es útil
Dónde se gana el sueldo el generador de gradientes - ubicaciones típicas:
- Hero sections: cada landing page necesita un gradiente que entre por los ojos.
- Marca: un gradiente de dos colores corporativos = estilo consistente.
- Fondos de app: un gradiente sutil hace que una UI plana se sienta premium.
- Botones: un radial sutil en hover añade vida.
- Tarjetas: un gradiente cónico como "shimmer" (estado de loading).
- Plantillas de email: el correo HTML soporta gradientes desde 2020.
- Diseñadores migrando a OKLCH: compara sRGB vs OKLCH lado a lado y ve la diferencia en gradientes de colores complementarios (azul→amarillo, rojo→verde muestran la brecha más).
Preguntas y respuestas
Porque los navegadores interpolan de forma nativa entre paradas en sRGB. Para obtener un efecto OKLCH perceptual insertamos ~10 paradas intermedias por segmento: el navegador interpola linealmente entre ellas y el resultado es prácticamente idéntico a una interpolación OKLCH real. CSS Color Level 4 tiene la sintaxis nativa "in oklch" pero el soporte sigue siendo limitado (Chrome 113+, Safari 16.4+, Firefox 113+).