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.
¿Cómo hago un degradado de colores para mi página web?
Elige el Color 1 y el Color 2 con el selector, ajusta el ángulo (de 0° a 315°) y ya tienes tu degradado armado en la vista previa. Dale a “Copiar CSS” y pégalo en la hoja de estilos de tu página — no hace falta escribir código a mano.
¿El código funciona directo en mi sitio o necesito editarlo?
Funciona directo. El botón “Copiar CSS” copia la línea completa (background: linear-gradient(...);) lista para pegar en tu archivo CSS o en un atributo style, sin que tengas que cambiar nada — a menos que tú quieras ajustar los colores o el ángulo después.
¿Puedo usarlo para Canva o solo para código?
Esta herramienta genera código CSS, no una imagen. Si tu sitio o app usa CSS, pégalo directo y listo. Pero si necesitas el degradado como imagen para Canva u otro editor visual, esta tool no exporta imágenes — tendrías que recrear los mismos colores y el mismo ángulo ahí, dentro de Canva.
Generador de link de WhatsApp
Crea tu enlace wa.me con mensaje precargado. Recibe clientes con un clic.
Abrir →Generador de código QR
Convierte cualquier link, menú o número en un QR descargable en PNG.
Abrir →Generador de firma de correo
Crea una firma profesional lista para pegar en Gmail u Outlook.
Abrir →Generador de paletas de colores
Elige un color base y genera paletas armónicas con HEX listos para copiar.
Abrir →Contador de palabras
Cuenta palabras, caracteres, frases y tiempo de lectura de tu texto.
Abrir →