Colores y diseño
Generador de degradados CSS
Compón tu degradado a ojo y copia el CSS en un clic.
Un buen degradado da profundidad a un fondo, un botón o una sección de portada — pero encontrar los colores y el ángulo correctos lleva su ensayo y error. Este editor te deja componer de forma visual: añade de dos a cinco paradas de color, coloca cada una con precisión, ajusta el ángulo del degradado lineal o cambia al modo radial. La vista previa llena todo el marco y se actualiza con cada retoque, exactamente como lo renderizará tu navegador. Cuando el resultado te convenza, un clic copia la declaración CSS completa (background: linear-gradient(…)), lista para pegar en una hoja de estilos, un componente o un e-mail HTML. Sin cuenta — todo funciona en tu navegador.
¿Cómo funciona?
- Elige el tipo de degradado: lineal o radial.
- Añade tus colores (de 2 a 5 paradas) y colócalas.
- Ajusta el ángulo y afina a ojo con la vista previa a pantalla completa.
- Copia el CSS generado en tu hoja de estilos.
Preguntas frecuentes
¿Degradado lineal o radial? ¿En qué se diferencian?
El lineal avanza a lo largo de una recta con el ángulo que elijas — ideal para fondos y botones. El radial irradia desde el centro hacia fuera — perfecto para efectos de halo o de foco.
¿Cómo consigo un degradado sutil y elegante?
Quédate entre tonos vecinos del círculo cromático y limita la diferencia de luminosidad: dos matices cercanos casi siempre ganan a un arcoíris. Un ángulo de 135° da una diagonal natural.
¿El código generado funciona en todas partes?
Sí: linear-gradient() y radial-gradient() están soportados por todos los navegadores actuales, sin prefijos. Solo algunos clientes de correo antiguos los ignoran — define allí un color de fondo de respaldo.