Generador de gradientes CSS
Diseña hermosos gradientes CSS lineales, radiales y cónicos con vista previa en vivo y copia el código con un clic
Vista previa en vivo
Tipo de gradiente
Paradas de color
Preajustes
Código CSS
background: linear-gradient(90deg, #ff0080 0%, #7928ca 100%);Todo se genera localmente en tu navegador. No se envía nada a un servidor.
Acerca de esta herramienta
Este generador de gradientes CSS te permite diseñar mezclas de color suaves de forma visual y copiar CSS listo para pegar con un clic. Elige un gradiente lineal, radial o cónico, añade tantas paradas de color como quieras y ajusta el color de cada parada con un selector de color nativo o un campo HEX, además de una posición de 0 a 100 por ciento. Para gradientes lineales puedes establecer cualquier ángulo de 0 a 360 grados o usar los botones rápidos de dirección; los gradientes radiales admiten formas de círculo o elipse, y los cónicos giran los colores alrededor de un punto central. Una gran vista previa en vivo se actualiza al instante para que veas exactamente lo que creas. Empieza con uno de los preajustes seleccionados, pulsa el botón aleatorio para nuevas ideas y luego copia la propiedad background generada en tu hoja de estilos. Todo funciona localmente en tu navegador, así que es rápido, privado y funciona sin conexión.
Cómo usarlo
- 1 Elige un tipo de gradiente: lineal, radial o cónico.
- 2 Añade paradas de color y define el color de cada parada (selector o HEX) y su posición de 0 a 100%.
- 3 Ajusta el ángulo para gradientes lineales y cónicos, o la forma para los radiales, o carga un preajuste.
- 4 Observa la vista previa en vivo y haz clic en Copiar CSS para pegar la propiedad background en tu proyecto.
Cómo funciona
La herramienta compone una función de gradiente CSS estándar a partir de tus ajustes. Los gradientes lineales usan linear-gradient(ángulo, paradas), donde el ángulo orienta la línea del gradiente y cada parada de color se escribe como un color seguido de una posición en porcentaje. Los gradientes radiales usan radial-gradient(forma at center, paradas) para esparcir los colores hacia afuera desde el medio, y los cónicos usan conic-gradient(from ángulo at center, paradas) para girar los colores alrededor de un punto. Las paradas de color se ordenan automáticamente por posición antes de la salida, así que el orden en que las añades no importa. Las posiciones se limitan a 0-100% y siempre se mantienen al menos dos paradas, por lo que el CSS generado siempre es válido. El resultado es una declaración background simple que puedes usar en cualquier navegador moderno sin prefijos.
Preguntas frecuentes
¿Cuál es la diferencia entre gradientes lineales, radiales y cónicos?
Un gradiente lineal mezcla colores a lo largo de una línea recta cuya dirección defines con un ángulo. Un gradiente radial esparce colores hacia afuera desde un punto central en círculo o elipse. Un gradiente cónico gira los colores alrededor de un punto central, útil para gráficos circulares, ruedas de color y efectos angulares. Los tres son CSS nativo y compatibles con todos los navegadores modernos.
¿Cuántas paradas de color puedo añadir?
Puedes añadir tantas paradas de color como necesites; la herramienta siempre mantiene un mínimo de dos para que el gradiente siga siendo válido. Cada parada tiene su propio color y una posición de 0 a 100 por ciento. Añadir más paradas te permite crear arcoíris, fondos multicolor y transiciones suaves de varios colores.
¿Qué hace el control de ángulo?
Para un gradiente lineal, el ángulo define la dirección de la línea de color: 0 grados apunta hacia arriba, 90 a la derecha, 180 hacia abajo y 270 a la izquierda, para que dirijas la mezcla a cualquier lado. Para un gradiente cónico, el ángulo define la rotación inicial del barrido. Puedes arrastrar el deslizador, escribir un valor exacto o usar los botones rápidos de dirección.
¿El CSS generado está listo para usarse en producción?
Sí. La salida es una propiedad background estándar con funciones de gradiente nativas que funcionan en todos los navegadores actuales sin prefijos de proveedor. Solo copia la línea y pégala en tu hoja de estilos, estilo en línea o componente. Puedes cambiar el nombre de la propiedad a background-image si prefieres mantener un color de fondo aparte.
¿Se envían mis datos a algún sitio?
No. Todo el generador se ejecuta en tu navegador con JavaScript y CSS. No se sube ni se almacena en un servidor nada sobre tus colores o gradientes, así que la herramienta es privada y sigue funcionando aunque te desconectes de internet.
Herramientas y usos relacionados
Combina el generador de gradientes con el conversor de color para elegir valores exactos HEX, RGB y HSL, y con el verificador de contraste para asegurarte de que el texto siga siendo legible sobre tu gradiente. Diseñadores y desarrolladores lo usan para crear fondos principales, botones, tarjetas, insignias y efectos decorativos para sitios web y aplicaciones.