Generador de degradados CSS
Crea degradados CSS lineales, radiales y cónicos con mezcla OKLCH u OKLab y respaldo sRGB, y copia CSS, Tailwind o SVG, o descarga un PNG.
Paradas de color
Haz clic en la barra para añadir una parada y arrastra una parada para moverla. Con una parada seleccionada, las flechas del teclado la mueven y Supr la elimina.
Mezclar colores en
Las mismas paradas, mezcladas de tres formas. El sRGB clásico puede volverse gris o apagado entre colores muy distintos; OKLab mantiene uniforme el brillo y OKLCH conserva la intensidad del color. Los navegadores que no conocen OKLab ni OKLCH reciben un respaldo sRGB que se ve igual.
Texto encima
- Texto blanco
- 2,1:1
- Demasiado bajo
- Texto negro
- 4,2:1
- AA solo texto grande
El contraste más bajo en cualquier punto del degradado. WCAG AA exige 4,5:1 para el texto normal y 3:1 para el texto grande.
Código
background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);Crea un degradado CSS a ojo y copia un código que funciona en todas partes. Elige lineal, radial o cónico, arrastra las paradas de color y decide cómo se mezclan los colores: los navegadores modernos pueden mezclar en OKLab u OKLCH, lo que evita la zona gris y apagada de los degradados sRGB clásicos, y el código incluye un respaldo sRGB equivalente para los más antiguos. También ves si el texto blanco o negro sigue siendo legible encima, y puedes exportar una clase de Tailwind, un SVG o un PNG del tamaño que quieras.