Generador de degradados CSS
Crea un fondo degradado de forma visual: arrastra las paradas de color, elige lineal, radial o cónico, ajusta el ángulo y copia el CSS listo para usar. ¿Necesitas una imagen? Descarga el mismo degradado como PNG en cualquier tamaño.
Última actualización:
Cómo usar Generador de degradados CSS
- Elige un tipo: Lineal, Radial o Cónico.
- Edita las paradas de color: haz clic en la barra para añadir una parada, arrastra los controladores para moverlas y cambia el color, la posición o la opacidad en la lista de abajo.
- Fija la dirección con el control de ángulo o los botones de flecha, o el centro, la forma y el tamaño en los degradados radiales y cónicos.
- Pulsa Copiar CSS y pega el código en tu hoja de estilos.
- ¿Necesitas una imagen? Elige un tamaño y pulsa Descargar PNG.
Guía rápida de la sintaxis de degradados CSS
| Tipo | Ejemplo | Resultado |
|---|---|---|
| Lineal | linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%) | Coral a la izquierda que se funde en melocotón a la derecha |
| Lineal, 3 paradas | linear-gradient(180deg, #a1c4fd, #c2e9fb 60%, #fff) | Azul cielo arriba a blanco abajo |
| Radial | radial-gradient(circle at 50% 50%, #fff 0%, #c7782f 100%) | Centro blanco que brilla hacia el ámbar |
| Elipse radial | radial-gradient(ellipse closest-side at 30% 40%, …) | Elipse que toca los bordes más cercanos |
| Cónico | conic-gradient(from 0deg at 50% 50%, red, yellow, lime, aqua, blue, magenta, red) | Una rueda de tonos completa |
| Rayas | repeating-linear-gradient(45deg, #2f6b4f 0% 5%, #fff 5% 10%) | Rayas diagonales |
Cómo se calcula la línea del degradado
En un degradado lineal con ángulo θ dentro de una caja de ancho W y alto H, CSS hace que la línea del degradado pase por el centro y fija su longitud en L = |W · sin θ| + |H · cos θ|, de modo que las posiciones 0% y 100% caen exactamente en las esquinas. Ejemplo: una imagen de 1920 × 1080 a 45° tiene L = 1920 × 0.707 + 1080 × 0.707 ≈ 2121 px, así que una parada al 50% queda en el centro exacto y una parada al 25% está a 530 px del inicio de la línea.
En un degradado radial el tamaño predeterminado es farthest-corner: un círculo centrado en 50% 50% de una caja de 1920 × 1080 tiene un radio de √(960² + 540²) ≈ 1101 px. La exportación a PNG reproduce estas reglas, incluidas las elipses y los tamaños closest-side, farthest-side y closest-corner.
Consejos de diseño
- Usa colores vecinos en la rueda de color (por ejemplo, de azul a morado) para degradados suaves; los pares complementarios como rojo y verde pasan por un tono intermedio apagado.
- Añade una parada intermedia algo más clara que ambos extremos para evitar una franja gris apagada.
- Mantén el texto legible: comprueba el contraste del texto con las partes más claras y más oscuras del degradado.
- Lo sutil suele ser mejor para fondos de interfaz: prueba dos tonos muy parecidos como #e0eafc → #cfdef3.
- Exporta un PNG para lugares donde no hay CSS, como firmas de correo, diapositivas o banners de redes sociales.
Preguntas frecuentes
¿Cómo uso el CSS generado?
Pega ambas líneas en la regla CSS del elemento, por ejemplo body { … } o .hero { … }. La primera línea define un color sólido de respaldo para navegadores muy antiguos; la segunda define el degradado. En CSS los degradados son imágenes, así que también puedes usarlos con background-image.
¿Qué significa el ángulo en un degradado lineal?
0deg apunta hacia arriba, 90deg hacia la derecha, 180deg hacia abajo y 270deg hacia la izquierda, así que linear-gradient(90deg, red, blue) va del rojo a la izquierda al azul a la derecha. La línea del degradado es lo bastante larga para cubrir las esquinas con cualquier ángulo.
¿Qué es un degradado cónico?
Un degradado cónico recorre los colores alrededor de un punto central, como una rueda de color o un gráfico circular. El ángulo inicial (from) indica dónde empieza el primer color, medido en el sentido de las agujas del reloj desde arriba. Todos los navegadores modernos admiten conic-gradient().
¿Cómo hago una línea nítida entre dos colores?
Da la misma posición a dos paradas vecinas, por ejemplo #ff0000 50% y #0000ff 50%. Combinado con Degradado repetido, esto crea rayas.
¿El PNG es exactamente igual al degradado CSS?
El PNG se dibuja con la API de canvas usando las mismas reglas de ángulo, longitud de la línea del degradado, centro, forma y tamaño que CSS, así que coincide con la vista previa. Puede haber pequeñas diferencias en la mezcla de colores entre navegadores.
¿Puedo añadir transparencia?
Sí. Baja el control α (opacidad) de una parada para desvanecerla. El CSS usará entonces colores rgba(), y el PNG conserva la transparencia.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.