Generador de degradados CSS
Crea un degradado CSS lineal o radial con hasta cinco paradas de color y copia la declaración de fondo lista para pegar.
Degradado generado
background: linear-gradient(135deg, #14B8A6 0%, #6366F1 100%);
Cómo funciona
Un generador de degradados CSS crea visualmente un valor linear-gradient() o radial-gradient(), para que puedas elegir colores y posiciones con una vista previa en vivo en lugar de adivinar la sintaxis manualmente.
- Elige lineal o radial
El lineal sigue un ángulo; el radial se extiende hacia afuera desde el centro.
- Configura el ángulo y las paradas
Arrastra el control deslizante de ángulo y luego define el color y la posición de cada parada de 0 a 100%.
- Copia el CSS
La declaración de fondo se actualiza en vivo y se puede copiar con un solo clic.
Uso del CSS generado
Pega la línea copiada en la propiedad background o background-image de cualquier elemento de bloque:
.hero { background: linear-gradient(to bottom, #0f172a 0%, #1e3a5f 60%, #0f172a 100%); }
Los degradados no se pueden aplicar directamente a color o border-color. Para un degradado de texto, aplica el degradado como fondo en el elemento de texto y luego agrega background-clip: text y color: transparent.
Lineal frente a radial
- Lineal: las paradas se desplazan a lo largo de una línea recta según el ángulo elegido. 0deg apunta hacia arriba, 90deg hacia la derecha, 180deg hacia abajo y 270deg hacia la izquierda.
- Radial: las paradas se extienden desde el centro en forma circular. Esta herramienta siempre centra el degradado radial; para un degradado radial descentrado o elíptico, edita manualmente el valor generado y agrega una palabra clave de posición o forma.
Compatibilidad con navegadores
Tanto linear-gradient() como radial-gradient() funcionan en todos los navegadores actuales sin prefijos de proveedor. Las formas antiguas con prefijos como -webkit-linear-gradient() ya no son necesarias.
No incluido en esta herramienta
Los degradados cónicos (conic-gradient()) y los múltiples degradados superpuestos en un solo elemento no se generan aquí. Ambos son CSS válido que puedes agregar manualmente una vez que tengas un degradado base como punto de partida.
Preguntas frecuentes
¿Cómo genero un degradado CSS con múltiples paradas de color?
Agrega paradas de color con el botón Agregar parada de color y luego define el color hexadecimal y la posición porcentual de cada una. La vista previa y la línea CSS debajo se actualizan mientras escribes. Haz clic en Copiar CSS para obtener la declaración completa, por ejemplo: background: linear-gradient(135deg, #14B8A6 0%, #6366F1 100%);
¿En qué propiedad CSS pego un degradado generado?
Usa la propiedad background o background-image en cualquier elemento de bloque. Los degradados no se pueden aplicar directamente a color o border-color; para un degradado de texto, combina background-clip: text con color: transparent en el elemento de texto.
¿Cómo hago un degradado diagonal en CSS?
Establece el ángulo en un valor entre los ejes, como 45 para de arriba a la izquierda a abajo a la derecha o 135 para de arriba a la derecha a abajo a la izquierda. 0 apunta hacia arriba, 90 hacia la derecha, 180 hacia abajo y 270 hacia la izquierda.
¿Puedo agregar más de dos paradas de color a un degradado CSS?
Sí, esta herramienta admite hasta cinco paradas. Haz clic en Agregar parada de color para añadir una en el punto medio entre las dos últimas y luego ajusta su color y posición. Cada parada tiene su propio botón para eliminar cuando hay más de dos.
¿Esta herramienta admite degradados radiales?
Sí. Cambia Tipo a Radial para generar radial-gradient() en lugar de linear-gradient(). El degradado radial siempre está centrado; no hay ángulo que configurar porque se extiende uniformemente en todas direcciones. Los degradados cónicos no son compatibles y deben escribirse manualmente.