Generador de gradientes CSS en vivo
Elige dos colores y un ángulo, mira la vista previa moverse al instante y copia el linear-gradient() listo para pegar en tu CSS. Sin registro, sin marca de agua.
8 ángulos · código listo para pegar · usos ilimitados
"se pinta con código, no con Photoshop" 🎨
background: linear-gradient(135deg, #2d5cff, #ff4d8d);Cómo funciona
- 01
Elige tus colores
Toca Color 1 y Color 2 con el selector nativo, o dale a ⇄ para invertir el orden en un clic.
- 02
Ajusta el ángulo
Elige uno de los 8 ángulos (0° a 315°) y mira girar el gradiente en la vista previa, en vivo.
- 03
Copia y pega
El linear-gradient() queda listo abajo. Un clic en “Copiar CSS” y lo pegas en tu hoja de estilos.
Preguntas frecuentes
¿Qué es un gradiente CSS?
Es una transición suave entre dos o más colores que dibuja el propio navegador con la propiedad background, sin necesitar ninguna imagen. Pesa 0 KB y se ve nítido en cualquier pantalla o resolución.
¿linear-gradient o radial-gradient, cuál uso?
linear-gradient (el que arma esta herramienta) avanza en línea recta según un ángulo, ideal para fondos, botones y banners. radial-gradient se expande desde un punto central, mejor para focos de luz, viñetas o fondos de tarjeta.
¿Cómo elijo dos colores que combinen bien?
Un truco rápido: usa tonos separados entre 60° y 150° en el círculo cromático, ni gemelos ni opuestos. O toma dos colores que ya uses en tu logo o en la foto de tu producto para que el gradiente se sienta parte de tu marca.
¿Puedo usar más de dos colores?
Sí. Copia el CSS que te da esta herramienta y agrega un color extra separado por coma dentro del paréntesis, por ejemplo linear-gradient(135deg, #2d5cff, #00c4dd, #ff4d8d). Aquí lo dejamos en dos para que sea rápido de usar.