Generador de gradientes CSS

Crea un gradiente lineal CSS eligiendo dos colores y el ángulo de la transición, con vista previa en directo y el código listo para copiar.

Se procesa en tu dispositivo. Nada se envía a ningún servidor.

Color 1

Color 2

Ángulo

background: linear-gradient(135deg, #0B6E63, #55BFAF);

Genera la función linear-gradient() de CSS con los colores y el ángulo indicados, compatible con todos los navegadores modernos.

Casos de uso

1
Elige dos colores
Selecciona el color inicial y final del gradiente.
2
Ajusta el ángulo
Define la dirección del gradiente en grados.
3
Copia el CSS
Copia la propiedad background lista para pegar en tu hoja de estilos.

El ángulo sigue la convención de CSS: 0° va de abajo arriba, 90° de izquierda a derecha y 180° de arriba abajo.
En los campos de color vale cualquier color CSS: HEX, rgb(), rgba() con transparencia, hsl() o nombres como «tomato».
El código se entrega como propiedad background completa. Si un color no es válido, la vista previa no se pinta: revisa ese campo.

¿Solo genera gradientes lineales?

Sí, el MVP se centra en linear-gradient(); gradientes radiales o cónicos pueden añadirse más adelante.