Generador de degradados CSS
Crea un degradado CSS lineal, radial o cónico con varios colores, míralo en directo y copia el código CSS o Tailwind. Exportación en imagen PNG.
- Gratis
- Sin registro
- Sin subir archivos
- Windows, Mac, Android, iPhone
Cargando la herramienta…
Acerca de esta herramienta
Crea un degradado CSS en directo: lineal, radial o cónico, hasta 8 colores con su posición y opacidad, ángulo y centro ajustables. Copia el código CSS o la clase Tailwind, o guarda el degradado como imagen para un fondo de pantalla o una maqueta.
Cuándo usarla
Fondos de secciones y botones
Un degradado sutil da profundidad a un banner principal o a un botón destacado sin cargar ninguna imagen: el código cabe en una línea.
Velo sobre una foto
Un degradado de transparente a negro sobre la parte baja de una imagen hace legibles los títulos blancos, sea cual sea la foto.
Fondos de pantalla y visuales
Guardado a 1920 × 1080, el degradado sirve como fondo de pantalla, fondo de diapositiva o base para un visual de redes sociales.
Cómo se usa
- Elige el tipo de degradado y su ángulo.
- Ajusta cada color y su posición, hasta 8 colores.
- Copia el código CSS o Tailwind, o guarda el degradado como imagen.
Cómo funciona
La herramienta escribe la misma sintaxis que las hojas de estilo: los colores se ordenan por posición, la opacidad se convierte en rgba() y el ángulo sigue la convención CSS (0deg apunta hacia arriba, 90deg hacia la derecha).
Para exportar la imagen, el degradado se vuelve a dibujar en un canvas con las mismas reglas que CSS: la línea de un degradado lineal se calcula para que las esquinas reciban los colores extremos, y un degradado radial llega a la esquina más lejana.
Consejos para un mejor resultado
- Dos colores vecinos en el círculo cromático dan los degradados más naturales.
- Evita pasar por el gris: entre dos colores complementarios, añade un color intermedio vivo.
- Si pones texto encima, comprueba el contraste con el color más claro del degradado.
- Los degradados cónicos repetidos crean bonitos abanicos con dos colores cercanos.
Problemas frecuentes y soluciones
Aparece una franja gris en el centro
Fundir dos colores opuestos pasa por el gris. Añade un color intermedio o acerca los tonos.
El degradado se ve a bandas
Los degradados muy suaves en grandes superficies pueden mostrar bandas. Aumenta la diferencia de color o añade un ligero ruido en una imagen.
La clase Tailwind no funciona
La clase bg-[…] requiere Tailwind 3 o superior con los valores arbitrarios activados (por defecto).
Preguntas frecuentes
¿Qué diferencia hay entre degradado lineal, radial y cónico?
El lineal funde los colores a lo largo de una recta, el radial se extiende desde un centro hacia fuera y el cónico gira alrededor de un centro como las agujas de un reloj (útil para gráficos circulares y ruedas de color).
¿El código funciona en todos los navegadores?
Sí. linear-gradient, radial-gradient y conic-gradient son compatibles con todos los navegadores recientes. Se añade un color sólido en la primera línea para navegadores muy antiguos.
¿Puedo usar transparencia?
Sí: cada color tiene su propia opacidad. Un degradado hacia un color transparente se usa a menudo para oscurecer la parte baja de una foto y poner texto encima.
¿Qué hace la opción «Repetir»?
Genera un degradado repetitivo: el motivo se repite y crea rayas o círculos concéntricos a partir de dos o tres colores cercanos.
Búsquedas relacionadas
¿Sigues atascado?
Pregunta en el foro: la categoría, la herramienta, la ficha de tu dispositivo y el resultado de la prueba se rellenan solos.