Generador de degradados CSS
Construye un degradado de fondo en CSS de forma visual: elige los colores, mueve sus posiciones, ajusta el ángulo y copia el CSS para tu hoja de estilos.
No necesita datos
Cómo se usa
- Elige lineal, radial o cónico.
- Elige los colores y arrastra sus posiciones.
- Ajusta el ángulo.
- Copia el CSS.
Cómo funciona
La herramienta escribe las funciones de degradado estándar de CSS, compatibles con todos los navegadores modernos: linear-gradient(ángulo, color posición, …), radial-gradient(…) y conic-gradient(from ángulo, …). Las paradas se ordenan por posición, así que el código siempre es válido.
Para que el texto se lea bien sobre un degradado, comprueba el contraste del color del texto tanto sobre la parte más clara como sobre la más oscura.
Ejemplos
- Fondo de una cabecera
- linear-gradient(135deg, #0d6e63 0%, #3cc3b0 55%, #f5d76e 100%)
Usos habituales
- Cabeceras y botones
- Fondos y tarjetas
- Probar ideas de color
Privacidad y seguridad
Esta herramienta no necesita ningún dato personal ni ningún archivo. Los resultados se generan en tu dispositivo. Cómo trata los archivos cada herramienta
Preguntas frecuentes
¿Hacen falta prefijos de navegador?
No. Todos los navegadores principales admiten los degradados sin prefijo desde hace años.
¿Puedo usar transparencia?
Sí: una vez copiado, edita el CSS para usar rgba() o colores HEX de 8 dígitos.
Última actualización: