Generador de degradados CSS
Crea degradados lineales, radiales o cónicos y copia el CSS listo para usar.
Ajustes del degradado
Vista previa y código
Texto degradado
Cómo usarlo- Copia el CSS en tu hoja de estilos.
- Añade la clase al elemento HTML:
class="my-gradient"
class="my-gradient"Consejos de degradado
Compatibilidad
Los navegadores modernos soportan bien los degradados CSS; prueba siempre las partes clave.
Rendimiento
Dos a cuatro paradas de color suelen bastar para una interfaz cuidada.
Contraste
Comprueba el contraste si el degradado va detrás de texto.
* El CSS generado puede verse ligeramente distinto según el navegador.
Un degradado puede dar vida a una web, pero también puede parecer improvisado si los colores no acompañan al contenido. Este generador está pensado para trabajo real de diseño web: probar rápido, copiar CSS limpio y ajustar lo necesario sin pelearse con la sintaxis.
Pensado para diseñadores y desarrolladores
Úsalo para fondos de hero, tarjetas, botones, separadores, portfolios o landings. La vista previa ayuda a decidir antes de tocar la hoja de estilos del proyecto.
Cómo escoger un buen degradado
- Empieza con dos colores y añade más solo si aporta algo.
- Cuida el contraste si va a haber texto encima.
- Usa degradados suaves para interfaces profesionales y combinaciones más vivas para campañas o piezas creativas.
- Pon un nombre de clase que encaje con tu proyecto.
Casos de uso habituales
Funciona bien para webs de negocio, páginas de lanzamiento, banners, secciones de portfolio, recursos para redes y prototipos que luego pasarán a CSS real.
Accesibilidad primero
El degradado no debe dificultar la lectura. Comprueba contraste, estados hover y modo oscuro antes de publicar.