🌈

generador gradientes CSS

Crea degradados CSS lineales y radiales visualmente. Añade paradas de color, ajusta posiciones, establece el ángulo y copia el CSS listo para usar con un clic.

Herramientas de generación Se ejecuta localmente No se envían datos
Degradado CSSdegradado linealdegradado radialparadas de color
Tipo de degradado
Ángulo
Paradas de color
Vista previa
Salida CSS
background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);

¿Qué es el generador gradientes CSS?

El generador gradientes CSS es una herramienta visual para crear gradientes lineales y radiales de CSS. Añade paradas de color, establece sus posiciones en una escala de 0—00%, elige un ángulo para gradientes lineales y observa el resultado en vivo. La propiedad CSS final está lista para pegar en cualquier hoja de estilos.

Cómo usar el generador gradientes CSS

  1. Elige el tipo de gradiente Lineal o Radial.
  2. Para gradientes lineales, establece el ángulo con el control deslizante.
  3. Edita las paradas de color predeterminadas haciendo clic en los selectores de color y ajustando las posiciones.
  4. Añade más paradas de color con el botón «Añadir parada de color» si es necesario.
  5. Haz clic en «Copiar CSS» para copiar la propiedad de gradiente al portapapeles.

Herramientas relacionadas

🎨
Extraer paleta imagen
Extrae una paleta compacta de colores HEX dominantes de una imagen
 ☀️
Brillo y contraste imagen
Ajusta el brillo y el contraste de la foto con vista previa instantánea
 🌓
Imagen duotono
Asigna las sombras y luces de la imagen a dos colores personalizados
Sintaxis de gradientes CSS ▾
Ejemplo
Entrada Lineal, 135°, parada 1: #7c6af7 al 0%, parada 2: #06b6d4 al 100%
Salida background: linear-gradient(135deg, #7c6af7 0%, #06b6d4 100%);
Casos de uso comunes
  • Genera degradados de fondo para landing pages y componentes de interfaz
  • Crea superposiciones de degradado para secciones hero
  • Crea patrones de paradas de color para gráficos o separadores
  • Prototipa ideas de degradados antes de transferirlas a una herramienta de diseño
Preguntas frecuentes
¿Qué tipos de degradado son compatibles?

Se admiten tanto degradados lineales con un ángulo personalizado (0—60°) como degradados radiales (forma circular).

¿Puedo añadir más de dos paradas de color?

Sí. Haz clic en "Añadir parada de color" para añadir tantas paradas como necesites. Cada parada tiene un color y una posición independientes.

¿Cómo controlo la dirección de un degradado lineal?

Usa el control deslizante de ángulo. 0° va de arriba a abajo, 90° de izquierda a derecha y 135° en diagonal.

¿El resultado es compatible con todos los navegadores?

Yes. The tool outputs standard CSS using the linear-gradient() and radial-gradient() functions which are supported by all modern browsers.