¿Puedo crear gradientes radiales y cónicos, no solo lineales?

Sí. Cambia entre Lineal, Radial y Cónico en el selector de tipo. Cada uno muestra su configuración específica: ángulo para lineal, forma/tamaño/centro para radial, ángulo inicio/centro para cónico.

¿Puedo agregar más de dos paradas de color?

Sí. El botón + agrega paradas (hasta 10) con selector de color, entrada HEX y control de posición. El botón × las elimina; siempre se conservan al menos 2.

¿Puedo cambiar el ángulo y la posición del centro?

Sí. El control de ángulo ajusta la dirección del gradiente lineal (0–360°). Los controles X/Y establecen el centro para radiales y cónicos. El radial también tiene opciones de forma y tamaño.

¿Puedo copiar el CSS y usarlo directamente?

Sí. La salida muestra una línea completa de CSS (o clase Tailwind). Haz clic en Copiar y pégala en tu proyecto. Los valores son siempre compatibles con CSS.

¿Puedo usar el gradiente en Tailwind CSS?

Sí. Cambia a la pestaña Tailwind para obtener una clase bg-[...] con valor arbitrario. Agrégala a tu elemento HTML.

¿Puedo hacer gradientes semitransparentes con rgba?

Sí. Baja el alfa de cualquier parada por debajo del 100%; la salida cambia automáticamente a rgba() para ese stop.

¿Mis datos de color se envían a un servidor?

No. Todo ocurre completamente en tu navegador. Tus colores y el CSS generado nunca se cargan ni almacenan.

Generador de Gradientes CSS — Cónico, Radial y Lineal Multicolor (Gratis)

Tipo de gradiente

Paradas de color

Posición 0%

Opacidad (alpha) (100%)

Posición 100%

Opacidad (alpha) (100%)

Se necesitan al menos 2 paradas de color.

Ángulo (90°)

deg

Presets

Salida CSS

Formato de salida

Formato de color

background: linear-gradient(90deg, #7C3AED 0%, #3B82F6 100%);

Herramientas externas relacionadas

Algunos enlaces son enlaces de afiliados.

Adobe Creative CloudSuite de apps creativas CanvaDiseño gráfico fácil

Herramientas relacionadas

Generador de Paletas de ColoresGenera paletas de colores armónicas desde un HEX base usando esquemas complementario, análogo, triádico y más. Bloquea colores, regenera el resto y exporta a CSS, Tailwind o JSON.Conversor de ColorConvierte cualquier color entre HEX, RGB, HSL, HSV y RGBA a la vez. Edita un valor, copia con un clic, con alfa y contraste WCAG.Extractor de Colores de ImagenExtrae la paleta de colores dominantes de cualquier imagen en tu navegador, sin subir nada. Obtén HEX, RGB y porcentaje (%) de cada color, elige cuántos colores y exporta como CSS/JSON.Herramienta de combinación de fuentesEncuentra combinaciones curadas de Google Fonts para títulos y cuerpo, previsualízalas en tiempo real y copia el CSS con un clic.

Este generador de gradientes CSS gratuito permite crear gradientes lineales, radiales y cónicos con tantas paradas de color como necesites. Añade paradas, ajusta sus posiciones, elige colores con el selector o escribe un código HEX, y observa cómo una gran vista previa se actualiza al instante. Ajusta el ángulo, la forma y el centro, y cuando termines, copia el CSS de background listo para usar o un valor arbitrario de Tailwind con un clic. Sin instalación ni registro, todo en tu navegador.

Cómo usar

Elige un tipo de gradiente: Lineal, Radial o Cónico.
Edita las paradas de color: usa el selector o escribe un HEX, y arrastra el control de posición (0–100%).
Agrega más paradas con el botón + (hasta 10). Elimina con ×. Siempre se conservan al menos 2.
Ajusta la configuración del tipo: ángulo (lineal), forma/tamaño/centro (radial), ángulo inicio/centro (cónico).
Comienza con un preset o usa Aleatorio para explorar y luego ajusta.
Copia el CSS de background generado (o el valor de Tailwind) con un clic y pégalo en tu proyecto.

Tipos de gradiente

CSS tiene tres funciones de gradiente, cada una con un efecto visual diferente. Esta herramienta admite las tres.

Gradiente lineal (linear-gradient)

Los colores fluyen en línea recta según el ángulo indicado. 90° va de izquierda a derecha, 180° de arriba hacia abajo. Es el tipo más usado para fondos hero, botones y divisores decorativos.

Gradiente radial (radial-gradient)

Los colores irradian desde un punto central hacia afuera. Puedes elegir forma circular o elíptica, tamaño y posición del centro. Ideal para efectos de foco, resplandores y fondos suaves.

Gradiente cónico (conic-gradient)

Los colores rotan alrededor de un punto central. Puedes establecer el ángulo de inicio y la posición del centro. Perfectos para ruedas de color y gráficos circulares. Nota: conic-gradient es una función CSS relativamente nueva, los navegadores muy antiguos pueden no admitirla.

Características

Paradas de color: agregar, eliminar y posicionar

Agrega hasta 10 paradas con el botón + y elimínalas con ×. Siempre se conservan al menos 2. Arrastra el control de posición (0–100%) para colocar cada parada exactamente donde quieras. Dos paradas en la misma posición crean un límite nítido (hard stop).

Ángulo, forma y posición del centro

Los lineales tienen control de ángulo (0–360°). Los radiales permiten elegir forma, tamaño y centro con controles X/Y. Los cónicos añaden ángulo de inicio y posición de centro.

Selector de color y entrada HEX con alfa

Cada parada tiene un selector de color nativo y entrada HEX. Baja el alfa para paradas semitransparentes; la salida cambia automáticamente a rgba(). Colores inválidos muestran error en línea sin romper el gradiente.

Vista previa grande en vivo

El gradiente se muestra en un gran rectángulo en la parte superior, actualizándose al instante al editar cualquier parámetro. Lo que ves es lo que produce el CSS.

Copiar CSS al instante (background, background-image o Tailwind)

Elige el formato y haz clic en Copiar: background: CSS completo, background-image: solo el valor, o bg-[...] para Tailwind. Valores siempre en formato CSS compatible.

Presets y generación aleatoria

Haz clic en un preset para aplicarlo al instante. Usa Aleatorio para explorar gradientes nuevos. Ambos sirven como punto de partida creativo.

Casos de uso

Fondos hero, botones y gradientes de tarjetas

Establece un gradiente lineal para un hero o botón CTA, copia el CSS y pégalo en tu hoja de estilos. Un radial funciona bien para un resplandor suave detrás de una tarjeta.

Pegar directamente en CSS o Tailwind

Elige la salida background: y pega en tu regla CSS. Para Tailwind, cambia a esa pestaña y copia la clase bg-[linear-gradient(...)].

Gradiente cónico para ruedas de color y gráficos circulares

Agrega múltiples paradas a intervalos iguales en un gradiente cónico para crear una rueda de color o fondo estilo gráfico circular.

Notas y consejos

Dirección del ángulo: 0° apunta hacia arriba, 90° va de izquierda a derecha, siguiendo la especificación CSS. Usa la vista previa para confirmar.
Compatibilidad: linear-gradient y radial-gradient son compatibles con todos los navegadores modernos. conic-gradient es más nuevo y puede no funcionar en navegadores muy antiguos.
Sin posición explícita: si una parada no tiene posición, el navegador la distribuye uniformemente.
Gradientes semitransparentes: baja el alfa para obtener rgba() y crear efectos de superposición.
Tus datos de color nunca se envían a un servidor; todo ocurre localmente en tu navegador.

Preguntas frecuentes

¿Puedo crear gradientes radiales y cónicos, no solo lineales?: Sí. Cambia entre Lineal, Radial y Cónico en el selector de tipo. Cada uno muestra su configuración específica: ángulo para lineal, forma/tamaño/centro para radial, ángulo inicio/centro para cónico.
¿Puedo agregar más de dos paradas de color?: Sí. El botón + agrega paradas (hasta 10) con selector de color, entrada HEX y control de posición. El botón × las elimina; siempre se conservan al menos 2.
¿Puedo cambiar el ángulo y la posición del centro?: Sí. El control de ángulo ajusta la dirección del gradiente lineal (0–360°). Los controles X/Y establecen el centro para radiales y cónicos. El radial también tiene opciones de forma y tamaño.
¿Puedo copiar el CSS y usarlo directamente?: Sí. La salida muestra una línea completa de CSS (o clase Tailwind). Haz clic en Copiar y pégala en tu proyecto. Los valores son siempre compatibles con CSS.
¿Puedo usar el gradiente en Tailwind CSS?: Sí. Cambia a la pestaña Tailwind para obtener una clase bg-[...] con valor arbitrario. Agrégala a tu elemento HTML.
¿Puedo hacer gradientes semitransparentes con rgba?: Sí. Baja el alfa de cualquier parada por debajo del 100%; la salida cambia automáticamente a rgba() para ese stop.
¿Mis datos de color se envían a un servidor?: No. Todo ocurre completamente en tu navegador. Tus colores y el CSS generado nunca se cargan ni almacenan.