Generador de degradados CSS
Mezcla de dos a cinco colores en degradados CSS lineales, radiales o cónicos, con vista previa en vivo, código listo para pegar y paletas armonizadas a un clic.
Paradas de color
Paletas
background-color: #7C3AED; /* fallback for old browsers */ background-image: -webkit-linear-gradient(135deg, #7C3AED 0%, #EC4899 100%); background-image: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
0° apunta hacia arriba y 90° hacia la derecha; el ángulo avanza en sentido horario.
Esta herramienta funciona por completo en tu navegador. Tus datos nunca salen de tu dispositivo y no se suben a ningún servidor.
Cómo usarlo
- 1Fija de dos a cinco colores, o parte de una paleta predefinida.
- 2Elige el tipo de degradado y ajusta ángulo o forma; fija posiciones si quieres.
- 3Copia el bloque CSS y pégalo en tu hoja de estilos.
Generador de degradados CSS
Elige de dos a cinco colores, selecciona lineal, radial o cónico y arrastra el ángulo — la vista previa se actualiza al escribir y el CSS está siempre a una copia de distancia. Si dejas vacía la posición de una parada se coloca automáticamente como lo haría CSS; fija porcentajes exactos para cortes duros y mezclas descentradas.
La salida es un bloque de producción real: una línea de color sólido de reserva para navegadores antiguos, una línea con prefijo -webkit- para builds viejas de WebKit y la sintaxis estándar al final. El botón de armonización aleatoria rota los matices de tu paleta en el espacio HSL, así cada barajado mantiene el equilibrio en lugar de chocar.
Preguntas frecuentes
¿Por qué el CSS incluye una línea con prefijo -webkit-?
Es una línea de compatibilidad para navegadores WebKit antiguos (era de Safari 5–6 aproximadamente) que solo entendían -webkit-linear-gradient. Todos los navegadores de la última década leen la línea estándar, así que puedes borrar la prefijada si no necesitas dar soporte a esas versiones — mantenerla cuesta una línea y borrarla no cuesta nada.
¿Qué significa el ángulo en un degradado lineal?
Es la dirección en la que avanza el degradado, medida en sentido horario desde arriba: 0deg va de abajo hacia arriba, 90deg de izquierda a derecha, 180deg de arriba abajo. La herramienta normaliza cualquier ángulo (−45 pasa a 315) y la convención de dirección opuesta de la sintaxis vieja queda resuelta en la línea -webkit-.
¿Cuándo conviene un degradado cónico en vez de lineal o radial?
El cónico barre el color alrededor de un punto central — así se hacen gráficos de tarta, diales de ángulo y efectos de estallido solar. El lineal mezcla a lo largo de una recta y el radial se irradia desde el centro hacia fuera. Mismas paradas, geometría completamente distinta: cambia de tipo y mira la vista previa en lugar de adivinar.
Herramientas relacionadas
Comprobador de contraste
Calcula la relación de contraste WCAG entre dos colores con distintivos AA y AAA para texto normal y grande, y vista previa en vivo. Todo en tu navegador.
Todas las herramientas →
Conversor de colores
Pegue un color en hex, rgb() o hsl() y obtenga los tres formatos más una fila de tonos y sombras lista para su sistema de diseño.
Todas las herramientas →
Selector de color
Elija un color en la muestra o capte uno directamente de la pantalla con la API EyeDropper — hex, RGB y HSL copiables con un clic.
Todas las herramientas →
Borde de imagen
Añade un borde de color sólido o transparente a una imagen o a un lote: vista previa en vivo, salida en PNG o JPG, todo en tu navegador.
Todas las herramientas →
Insertar esta herramienta
Pon esta herramienta en tu sitio con una línea: se ejecuta en el navegador del visitante.
<iframe src="https://zoyku.com/es/tools/gradient-generator?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — gradient-generator" loading="lazy"></iframe>