Generador
de
degradados
CSS

Genera código CSS de degradados lineales, radiales y cónicos con vista previa en vivo y paradas de color.

Tipo de degradado

Preajustes

Paradas de color

0%
100%

Ajustes

Ángulo: 90deg
Repetir

Vista previa

Salida CSS

Más información

¿Cómo funcionan los degradados lineales, radiales y cónicos, y qué son los design tokens?

¿Te fue útil?

Herramientas relacionadas

Generador de sistemas de diseño

Convierte dos o tres colores de marca en tokens semánticos con vista previa en vivo y exportaciones a CSS, Tailwind, SCSS y JSON.

Generador de gradientes CSS

Genera código CSS para gradientes lineales, radiales y cónicos con vista previa en vivo, paradas de color y plantillas predefinidas.

Generador de sombras CSS

Genera valores CSS de box-shadow con controles visuales, vista previa en vivo y copia con un clic.

Generador de favicon

Genera todos los tamaños de favicon a partir de una sola imagen, incluidos ICO, Apple Touch Icon y iconos PWA.

Selector de colores

Elige colores visualmente, sincroniza valores HEX/RGB/HSL y extrae paletas dominantes de imágenes cargadas.

Formateador de JSON

Formatea y valida JSON rápidamente con salida limpia y mensajes de error.

Preguntas frecuentes

Usa la función CSS linear-gradient() o radial-gradient() y especifica al menos dos paradas de color. Por ejemplo, background: linear-gradient(to right, #FF0000, #0000FF) crea un degradado horizontal de rojo a azul.

Un degradado lineal hace la transición de colores a lo largo de una línea recta con un ángulo definido. Un degradado radial hace la transición hacia afuera desde un punto central con forma circular o elíptica.

Usa varios valores de background con la imagen como segunda capa: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0)), url(image.jpg). El degradado se renderiza encima de la imagen.

Generador de gradientes CSS