Generador de Degradados de Color
Crea degradados CSS lineales, radiales y cónicos visualmente, al instante y gratis. Añade hasta 10 paradas de color, define posiciones exactas, elige dirección y ángulo, y obtén CSS listo para producción con un clic. Incluye seis plantillas para empezar. Totalmente privado, sin registro.
Presets
Gradient Type
Direction
Color Stops (2)
Click the colour swatch to open the colour picker. Drag the slider to adjust position.
background: linear-gradient(to right, #6366f1 0%, #ec4899 100%);
¿Por qué usar nuestro generador de degradados de color?
- Vista previa en vivo y CSS instantáneo: el generador de degradados de color actualiza la vista previa en vivo y la salida CSS con cada cambio, sin necesidad de pulsar ningún botón. Ve tu degradado exactamente como aparecerá en el navegador y copia el CSS con un clic.
- Tres tipos de degradado y control total: crea degradados lineales, radiales y cónicos con control total sobre dirección, ángulo, forma, tamaño y posición central. Añade hasta 10 paradas de color, define posiciones exactas y activa el modo repetido para patrones en mosaico.
- 100% privado, sin subidas: toda la generación de degradados ocurre localmente en tu navegador. Tus elecciones de color nunca salen de tu dispositivo ni se envían a ningún servidor: seguro para proyectos de clientes y sistemas de diseño propietarios.
- Gratis y sin límites: genera degradados ilimitados sin registro, sin suscripción y sin límites de uso. El generador de degradados de color es totalmente gratis para siempre y sin anuncios que bloqueen la interfaz.
Casos de uso habituales del generador de degradados de color
- Fondos de sitios web y secciones hero: los diseñadores web usan el generador de degradados de color para crear fondos llamativos en secciones hero, degradados de página y separadores de sección. Copia el CSS directamente en tu hoja de estilos con un clic.
- Desarrollo de CSS y Tailwind: los desarrolladores frontend usan el generador para crear y probar el CSS de degradados antes de añadirlo a su código. El resultado es CSS listo para producción que funciona en todos los navegadores modernos.
- Tokens de sistemas de diseño: los equipos de sistemas de diseño usan el generador para definir tokens de degradado para fondos, tarjetas y componentes de interfaz. El constructor visual facilita alinear los degradados con los colores de marca.
- Gráficos para redes sociales y marketing: los responsables de marketing y creadores de contenido usan el generador para crear fondos degradados para publicaciones en redes sociales, banners y cabeceras de correo. La biblioteca de plantillas ofrece puntos de partida al instante.
- Estilos de botones y tarjetas: los desarrolladores de UI usan el generador para crear rellenos degradados para botones, tarjetas, insignias y barras de progreso. Los degradados radiales y cónicos aportan profundidad e interés visual a los componentes de interfaz.
- Diseño de landing pages y CTA: los optimizadores de conversión usan el generador para crear CTA y fondos de sección con degradados de alto contraste que llaman la atención y guían al usuario por la página.
¿Qué es un degradado CSS?
Un degradado CSS es una transición suave entre dos o más colores definida enteramente en CSS, sin necesidad de ningún archivo de imagen. Los degradados se crean usando la propiedad background o background-image con funciones de degradado. Nuestro generador de degradados de color construye la cadena CSS del degradado visualmente y produce CSS listo para producción que funciona en todos los navegadores modernos sin prefijos de proveedor.
Cómo funciona nuestro generador de degradados de color
- Elige un tipo de degradado: selecciona Lineal (transición en línea recta), Radial (circular o elíptica desde un punto central) o Cónico (girando alrededor de un punto central). Usa una plantilla para empezar al instante.
- Configura las paradas de color y las opciones: añade hasta 10 paradas de color con el selector de color o la entrada hexadecimal. Arrastra el control de posición para colocar cada parada con precisión. Define la dirección, el ángulo, la forma, el tamaño y la posición central de tu tipo de degradado. Todos los cambios actualizan la vista previa al instante.
- Copia el CSS: haz clic en «Copiar CSS» para copiar la declaración background: lista para producción en tu portapapeles. Pégala directamente en tu hoja de estilos.
Los tres tipos de degradado CSS
- Degradado lineal: transiciona los colores a lo largo de una línea recta. Controla la dirección con palabras clave predefinidas (to right, to bottom, etc.) o un ángulo personalizado en grados. Usa repeating-linear-gradient para patrones a rayas.
- Degradado radial: transiciona los colores hacia fuera desde un punto central en forma circular o elíptica. Controla la forma (circle o ellipse), el tamaño (farthest-corner, closest-side, etc.) y la posición central.
- Degradado cónico: transiciona los colores girando alrededor de un punto central, como una rueda de color o un gráfico circular. Controla el ángulo inicial y la posición central. Ideal para gráficos circulares, ruedas de color y diseños angulares.
Posiciones de las paradas de color
Cada parada de color tiene una posición (0%-100%) que determina dónde aparece ese color en el degradado. Si dos paradas tienen la misma posición, el degradado crea un borde duro en lugar de una transición suave, algo útil para efectos a rayas. El generador de degradados de color ordena las paradas por posición automáticamente, así que puedes añadirlas en cualquier orden.
Preguntas frecuentes
Un generador de degradados de color es una herramienta visual que crea código CSS de degradados a partir de paradas de color configurables, el tipo de degradado y los ajustes de dirección. Nuestro generador admite degradados lineales, radiales y cónicos con hasta 10 paradas de color y produce CSS listo para producción. Toda la generación se ejecuta íntegramente en tu navegador sin enviar datos a ningún servidor.
Los degradados lineales transicionan los colores a lo largo de una línea recta en una dirección o ángulo determinado. Los radiales transicionan los colores hacia fuera desde un punto central en forma circular o elíptica. Los cónicos transicionan los colores girando alrededor de un punto central, como una rueda de color. Cada tipo tiene distintos casos de uso y efectos visuales.
Sí. Toda la generación de degradados ocurre 100% en el lado del cliente, en tu navegador, usando JavaScript. Tus elecciones de color nunca se envían a ningún servidor, ni se almacenan, ni se transmiten a ningún lugar. El generador de degradados de color es completamente privado y seguro para proyectos de clientes.
Sí. El generador de degradados de color es 100% gratis, sin registro, sin funciones premium y sin límites de uso. Genera degradados ilimitados sin restricciones ni costes ocultos.
La opción de repetición cambia la función del degradado a repeating-linear-gradient, repeating-radial-gradient o repeating-conic-gradient. Esto repite el patrón del degradado por todo el elemento, creando efectos de rayas o patrones. El tamaño del patrón lo determinan las posiciones de tus paradas de color.
Para crear un borde duro entre dos colores, pon dos paradas de color adyacentes en la misma posición. Por ejemplo, si la parada A está al 50% y la parada B también al 50%, el degradado cambiará bruscamente del color A al color B en ese punto sin mezcla alguna.
Sí. Copia el valor del degradado y úsalo en una clase de valor arbitrario de Tailwind: bg-[linear-gradient(to_right,#6366f1,#ec4899)]. Sustituye los espacios por guiones bajos en los valores arbitrarios de Tailwind. También puedes añadir el degradado a tu tailwind.config.js bajo theme.extend.backgroundImage.
El generador de degradados de color admite hasta 10 paradas de color por degradado. El propio CSS no tiene un límite estricto de paradas, pero rara vez se necesitan degradados con más de 10. Puedes eliminar paradas hasta un mínimo de 2.
Sí. Los degradados lineales y radiales son compatibles con todos los navegadores modernos sin prefijos de proveedor. Los cónicos son compatibles con Chrome 69+, Firefox 83+, Safari 12.1+ y Edge 79+. Para navegadores antiguos, considera ofrecer un color sólido de reserva antes de la declaración del degradado.