Añade la entrada
Dos colores, un tipo de degradado y, para el lineal, un ángulo.
Mesa de diseño
Generador de degradados CSS
Ajusta el resultado y copia CSS listo para usar.
Privacidad integradaTu trabajo permanece contigo
background: linear-gradient(135deg, #06B6D4, #8B5CF6);Tu trabajo permanece privado en el navegador mientras usas esta herramienta.
¿Qué hace generador de degradados css?
Crea un degradado CSS lineal o radial circular de dos colores, previsualízalo, intercambia los extremos y copia una declaración background completa.
- Entrada
- Dos colores, un tipo de degradado y, para el lineal, un ángulo.
- Resultado
- Una declaración CSS background con el degradado.
- Precio
- Gratis
- Cuenta
- No necesaria
Cómo usar generador de degradados css
Elige los ajustes
Ajusta el resultado y copia CSS listo para usar.
Guarda o copia
Una declaración CSS background con el degradado.
Consejo práctico
Comprueba el contraste en varios puntos cuando coloques texto sobre un degradado.
Cuándo usar generador de degradados css
Crear el fondo de un hero o una tarjeta con dos colores conocidos.
Comprobar cómo cambia la dirección visual al intercambiar los extremos.
Elegir un ángulo lineal antes de pegar la declaración en CSS.
Ejemplo
Un ejemplo concreto de generador de degradados css
- Entrada
- Inicio #06B6D4 y final #8B5CF6
- Ajustes
- Degradado lineal a 135°
- Resultado
- background: linear-gradient(135deg, #06B6D4, #8B5CF6);
Qué puedes esperar
Cómo funciona
En modo lineal, la página serializa el ángulo y dos colores HEX en linear-gradient(). El modo radial emite radial-gradient(circle, inicio, final) y omite el ángulo porque no se aplica.
Antes de usarla
Límites y casos especiales
- Admite exactamente dos colores en las posiciones inicial y final implícitas; no hay paradas adicionales, transiciones duras ni tamaño o posición radial personalizados.
- La vista previa depende del CSS del navegador y no comprueba banding, impresión, prefijos antiguos ni contraste en todos los puntos.
Normas y fuentes
Preguntas frecuentes
Preguntas sobre Generador de degradados CSS
¿generador de degradados css es gratis?
Sí. Generador de degradados CSS se puede usar gratis.
¿generador de degradados css mantiene privado mi trabajo?
Sí. Tu trabajo permanece privado mientras usas la herramienta; no se sube lo que introduces.
¿Por qué desaparece el ángulo en un degradado radial?
El modo radial se expande desde un círculo y esta implementación no tiene una dirección lineal que serializar.
¿Puedo terminar un color antes del 100 %?
No en esta versión. Después de copiar el CSS puedes añadir porcentajes manualmente si necesitas posiciones distintas.