Generador de degradados

Crea degradados lineales, radiales y cónicos con 2-5 colores y ángulos propios. Vista previa en vivo, presets, aleatorio (Espacio), salida Tailwind y CSS, descarga PNG. Pulsa Espacio para mezclar.

o Space

Dirección y forma

Ángulo 135°

Paradas de color (2)

Salida CSS

¿Qué es un generador de degradados?

Transiciones suaves, cero imágenes

Un degradado mezcla dos o más colores a lo largo de una línea, desde un centro o alrededor de un punto. El navegador lo dibuja como CSS nítido e independiente de resolución, perfecto para heroes, botones, tarjetas y capas sin peticiones de red.

Esta herramienta va más allá de 2 colores: tipos lineal, radial y cónico, hasta 5 paradas con posiciones, 8 presets, inspiración aleatoria, clases arbitrarias de Tailwind y exportación PNG.

Cómo usar

Elige tipo y colores

Lineal, radial o cónico. Edita cada parada con selector, HEX o deslizador 0-100%. Añade hasta 5, quita hasta 2.

Pon la dirección

Deslizador de ángulo y presets de 45° para lineal y cónico, forma y posición para radial. Prueba presets o Espacio para aleatorio.

Copia y publica

Copia CSS o Tailwind, descarga CSS y PNG, o comparte la URL, paradas y ángulo quedan en ?type=&angle=&stops=.

Ejemplos de la vida real

Fondos hero: 135deg índigo a rosa

Lavados diagonales de 2 colores quedan legibles bajo texto blanco y se comprimen a una línea CSS. Parte del preset Indigo Pink.

Botones y CTA: 90deg 3 paradas

Tríos estilo atardecer dan profundidad a elementos pequeños. Mantén la parada media cerca del 50% para mezclas parejas en hover.

Brillos y focos: radial

Elipse radial arriba crea aurora suave detrás de tarjetas. Combina con superficies oscuras para capas con contraste seguro.

Anillos de progreso: cónico

Barridos cónicos desde ángulo sirven para gráficos circulares y cargadores. Dos paradas con posiciones duras dan anillos segmentados.

Envío con Tailwind

Copia la clase arbitraria bg-[linear-gradient(...)] directo al marcado, o guarda el fragmento de config para reusarlo.

Imágenes sociales y OG

Descarga PNG de 1200×630 para portadas, miniaturas y temporales sin abrir una herramienta de diseño.

Degradados animados y texto en degradado

Reusa cualquier salida: anima background-position para fondos brillo, o combínalo con background-clip:text para titulares en degradado. Copia el CSS y añade dos keyframes.

Preguntas frecuentes

1¿Cómo hago un degradado CSS?

Elige un tipo, pon 2-5 colores con posiciones, ajusta ángulo o centro y copia la línea background:. Vía fácil: elige un preset, ajusta una parada, pulsa Copiar CSS.

2Lineal vs radial vs cónico: ¿cuándo usar cada uno?

Lineal para heroes y botones a lo largo de un ángulo. Radial para brillos desde un punto (focos, aurora). Cónico para barridos alrededor de un centro como gráficos circulares, cargadores y ruedas de color.

3¿Qué diferencia hay entre “to right” y “90deg”?

Las palabras clave van de esquina a esquina según la caja. Los ángulos son direcciones exactas de brújula (0° es hacia arriba, 90° es hacia la derecha, en sentido horario). Damos grados para que el degradado se vea igual en cualquier proporción.

4¿Cómo funcionan paradas y posiciones? ¿Puedo hacer rayas?

Cada parada es color y 0-100%. Repártelas parejo para mezclas suaves. Apila dos paradas en la misma posición para un borde duro de raya. Añade hasta 5, quita hasta 2.

5¿Tengo Tailwind, PNG y enlaces para compartir?

Sí, cada degradado muestra CSS más Tailwind arbitrario bg-[...]. La ventana de descarga ofrece CSS, Tailwind o PNG 1200×630. La URL guarda tipo, ángulo y paradas para compartir.

6¿Funciona en todos los navegadores? ¿Se sube mi trabajo?

Lineal, radial y cónico son base desde 2015 en navegadores modernos. Gratis para siempre, sin registro, y nada sale de tu navegador.

Generador de paletas

Armonías aleatorias + modo imagen

Conversor de color

HEX RGB HSL HSV CMYK LAB

Comprobador de contraste

Notas de legibilidad de texto WCAG

Generador de paletas de imagen

Extrae la paleta de cualquier foto