Generador de degradados CSS
Diseña un degradado arrastrando las paradas de color, elige cómo se mezclan los colores y copia un CSS limpio, o expórtalo como SVG o PNG.
- Lineal · radial · cónico
- Mezcla OKLab
- CSS + Tailwind
- SVG + PNG
Cómo se calculan los colores entre dos paradas. OKLab evita la franja gris y apagada que sRGB produce entre colores opuestos.
Paradas de color
Exportar
SVG no tiene degradados cónicos. Usa la exportación PNG para un degradado cónico.
Ejemplos
Cómo crear un degradado CSS
Todo se actualiza en directo.
- 1
Define los colores
Haz clic en la barra para añadir una parada, arrástralas para moverlas y edita cada color debajo. O parte de un ajuste predefinido.
- 2
Dale forma
Elige lineal, radial o cónico, el ángulo o el centro y el método de mezcla.
- 3
Copia o exporta
Copia el código CSS o de Tailwind, o descarga el degradado como SVG o como PNG del tamaño que quieras.
Degradados sin ese centro apagado
Mezcla de color moderna, código compatible.
Tres tipos de degradado
Lineal con cualquier ángulo, radial en círculo o elipse y cónico para barridos tipo gráfico circular, cada uno con sus controles de posición.
Mezcla perceptual
Mezcla en OKLab u OKLCH y desaparece la franja gris y apagada que sRGB deja entre colores opuestos.
Edición directa
Añade paradas con un clic, arrástralas, ajústalas con las flechas del teclado y bórralas con doble clic. Los colores pueden ser parcialmente transparentes.
CSS para todos los navegadores
Usa la sintaxis moderna y breve, o activa la máxima compatibilidad para obtener el mismo aspecto escrito con paradas adicionales, más un color sólido de respaldo.
Vectorial y mapa de bits
SVG para escalar con nitidez en herramientas de diseño; PNG de hasta 8000 px para diapositivas, fondos de pantalla y correo electrónico.
Predefinidos y aleatorios
Dieciocho puntos de partida y un generador aleatorio que crea parejas y tríos armoniosos.
Enlace para compartir
Copia un enlace que abre la herramienta con el mismo contenido. Los datos van en la parte de la dirección posterior a #, que los navegadores no envían a los servidores.
Privado por diseño
Todo funciona en tu navegador. Lo que escribes o abres no se envía a ningún servidor.
Los degradados CSS, explicados
Un degradado CSS es una imagen que genera el propio navegador, así que no supone ninguna descarga y se ve nítido a cualquier tamaño. linear-gradient() mezcla a lo largo de una línea: 0deg apunta hacia arriba, 90deg hacia la derecha, y los ángulos crecen en el sentido de las agujas del reloj. radial-gradient() se extiende desde un punto central hacia fuera en forma de círculo o elipse, y conic-gradient() gira alrededor del centro como la aguja de un reloj: es la base de los gráficos circulares y de los círculos cromáticos.
Cada parada de color tiene un color y una posición. Entre dos paradas el navegador interpola; tradicionalmente lo hace en sRGB, canal por canal. Funciona con tonos vecinos, pero entre colores opuestos, como el azul y el amarillo, el punto medio se vuelve gris. El CSS moderno te deja elegir el espacio: linear-gradient(in oklab, blue, yellow) mezcla como espera el ojo, e in oklch recorre el círculo cromático para lograr transiciones vivas, de aire arcoíris.
Todos los navegadores actuales admiten la sintaxis in oklab (Chrome 111, Safari 16.2, Firefox 127 y posteriores). Para los más antiguos, este generador puede escribir ese mismo aspecto como un degradado clásico con paradas intermedias adicionales. Dos consejos prácticos más: pon un background-color liso antes del degradado como respaldo, y añade un ligero ángulo o una tercera parada para evitar el bandeado visible en superficies grandes y de poco contraste.
Las tres funciones de degradado
| Función | Cómo mezcla | Uso habitual |
|---|---|---|
| linear-gradient() | A lo largo de una recta con un ángulo | Fondos, botones, superposiciones, rellenos de texto |
| radial-gradient() | Desde un punto central hacia fuera | Focos de luz, resplandores, viñetas |
| conic-gradient() | Alrededor de un punto central | Gráficos circulares, círculos cromáticos, indicadores de carga |
| repeating-…() | Igual, pero en mosaico | Rayas y patrones |
Consejos
- Encuentra los colores exactos de tus paradas con el Conversor de colores.
- Toma un conjunto de colores ya hecho de la Colección de paletas o crea uno en el Generador de paletas.
- Un texto sobre un degradado tiene que leerse tanto en la zona más clara como en la más oscura: prueba ambas con el Comprobador de contraste.
- Para un fundido a transparente, usa el mismo color con alfa cero (por ejemplo, rgb(6 182 212 / 0)) en lugar de la palabra clave «transparent», que los navegadores antiguos mezclan pasando por el gris.
Preguntas frecuentes
¿No encuentras tu respuesta? Escríbenos: respondemos rápido.
¿Cómo creo un degradado en CSS?
Usa una función de degradado como imagen de fondo: background: linear-gradient(135deg, #06b6d4, #6366f1);. Este generador escribe el código por ti, con el ángulo, las paradas y el color de respaldo.
¿Por qué mi degradado se ve gris en el centro?
Porque los colores se mezclan en sRGB, donde los tonos opuestos se anulan. Elige la mezcla OKLab, o añade en medio una parada con un color vivo, y la franja gris desaparece.
¿En qué se diferencian el lineal, el radial y el cónico?
El lineal cambia de color a lo largo de una línea; el radial, del centro hacia fuera; el cónico, alrededor del centro, como las agujas de un reloj.
¿Funciona «in oklab» en todos los navegadores?
En todas las versiones actuales de Chrome, Edge, Safari y Firefox. Para navegadores antiguos, activa «Máxima compatibilidad con navegadores»: el mismo resultado visual se escribe con la sintaxis clásica.
¿Puedo usar el degradado como imagen?
Sí. Expórtalo como SVG, que se mantiene nítido a cualquier tamaño, o como PNG con las dimensiones en píxeles que necesites. Los degradados cónicos solo están disponibles en PNG, porque SVG no tiene degradado cónico.
¿Se envían mis datos a un servidor?
No. La herramienta funciona por completo en tu navegador. Lo que introduces no se sube, no se registra y no se guarda en nuestros servidores.
Más herramientas gratuitas para desarrolladores
Codifica, formatea, prueba, convierte y genera: pequeñas herramientas que funcionan en tu navegador y dejan tus datos en tu dispositivo.