¿Qué es Generador de degradados?

Un editor visual de gradientes CSS que te permite crear degradados lineales, radiales y cónicos con puntos de color ilimitados. Ajusta ángulos, posiciones y colores en tiempo real y copia el CSS con un solo clic.

Elige entre degradados lineales, radiales y cónicos, fija un ángulo de 0° a 360° y añade tantas paradas de color como necesites, con opacidad por parada para superposiciones transparentes. Empieza desde un predefinido cuidado como Atardecer, Instagram u Océano y luego ajusta los colores. En los radiales puedes elegir forma de círculo o elipse y una palabra clave de extensión, y cambiar la mezcla a OKLab u OKLCH para una interpolación moderna más suave, o aplicar una curva de suavizado. Activa Animar para obtener un bucle @keyframes listo para pegar y crear un fondo en movimiento. La salida es CSS puro que pegas en una hoja de estilos, la configuración de Tailwind o tu herramienta de diseño.

Cómo usar

1. Paso 1 — Elige el tipo de degradado (lineal, radial o cónico) y establece la dirección o el ángulo con el control deslizante de ángulo o los botones de ajuste preestablecido.
2. Paso 2 — Agrega puntos de color haciendo clic en la barra del degradado. Ajusta el color y la posición de cada punto arrastrándolo o ingresando valores exactos.
3. Paso 3 — Previsualiza el degradado en vivo y luego copia el código CSS generado a tu portapapeles o descárgalo como archivo CSS.

Cuándo usar

• Diseñar cabeceras, botones o fondos de tarjetas sin abrir Photoshop.
• Mantener la paleta de marca uniforme entre web, correo y diapositivas.
• Probar el efecto CSS antes de pasar las especificaciones al desarrollador.

Resultado

Supongamos que quieres un fondo hero con tema de atardecer. Elige un degradado lineal de 135°, pon naranja en 0%, rosa en 50% y morado en 100%, y copia el CSS a tu hoja de estilos.

Preguntas frecuentes

¿Qué diferencia hay entre gradiente lineal, radial y cónico?

El lineal recorre los colores en una línea recta según el ángulo. El radial los esparce desde un punto central, como un sol. El cónico los barre alrededor de un círculo, útil para gráficos circulares o ruedas de color.

¿Cuántas paradas de color puedo añadir?

No hay un tope estricto. La mayoría de los diseños usan entre dos y cuatro paradas. Pasadas cinco o seis el gradiente empieza a verse turbio porque los colores se mezclan y pierden las transiciones nítidas.

¿Por qué aparecen bandas en mi gradiente sobre fondo oscuro?

Las bandas aparecen cuando los colores adyacentes tienen una luminancia muy parecida. Aumenta el contraste entre paradas, cambia la mezcla de color a OKLCH u OKLab para una interpolación perceptual, o añade una capa de ruido sutil en CSS.

¿Puedo usar estos gradientes en Figma o Sketch?

El CSS no se pega directamente, pero los valores de color y las posiciones se traducen uno a uno. Copia el hex y el porcentaje de cada parada al editor de gradientes de tu herramienta de diseño.

¿Qué hace exactamente el parámetro de ángulo?

En gradientes lineales, 0° apunta hacia arriba y el ángulo gira en sentido horario: 90° es de izquierda a derecha, 180° de arriba abajo. En el cónico, el ángulo marca dónde empieza el barrido en el círculo.

Herramientas relacionadas