Saltar al contenido principal
LibraTool logoLibraTool

Generador de degradados CSS gratis

Crea degradados lineales, radiales y cónicos CSS con una vista previa en vivo. Copia el CSS con un clic.

Funciona sin conexión una vez cargado
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Evita puntos medios grises entre colores muy distintos. Añade una línea sRGB simple como alternativa para navegadores antiguos.

0%
100%

Ajustes predefinidos

Usos habituales

  • Crear degradados para secciones heroDiseña fondos degradados de página completa para secciones hero de sitios web y páginas de destino.
  • Crear botones y CTA degradadosDiseña fondos de botones degradados llamativos para llamadas a la acción que destaquen.
  • Crear fondos degradados para tarjetasDiseña rellenos degradados para tarjetas, modales, barras laterales y fondos de componentes de interfaz de usuario.
  • Crear degradados para gráficos de redes socialesDiseña fondos degradados vibrantes para publicaciones de Instagram, miniaturas de YouTube y tarjetas de Twitter.
  • Crear escalas de color para gráficosGenera escalas de color degradadas para mapas de calor, barras de progreso y visualizaciones de datos.

Cómo funciona

El generador de degradados construye cadenas de degradado CSS directamente en el navegador: sin biblioteca, sin servidor, sin subida. Una función escrita a mano ensambla la sintaxis correcta de linear-gradient, radial-gradient o conic-gradient a partir de tus paradas de color y el ángulo en tiempo real, y luego formatea el resultado según el destino de salida que elijas.

  1. 1
    Configura paradas y dirección
    Fijas entre 2 y 6 paradas de color usando el selector de color nativo del navegador, y luego posicionas cada parada a lo largo del eje de 0 a 100% con un control deslizante de rango. Para degradados lineales y cónicos también eliges un ángulo (0–360°); para degradados radiales eliges la forma (elipse o círculo) y la palabra clave de tamaño que controla hasta dónde se extiende el degradado.
  2. 2
    buildCss ensambla la cadena de degradado
    Con cada cambio, una función local buildCss concatena tus parámetros en la llamada de función CSS correcta; por ejemplo, linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). No interviene ninguna biblioteca; la cadena se construye con lógica de plantilla de JavaScript sencilla y se une directamente del arreglo de paradas.
  3. 3
    La vista previa en vivo se renderiza mediante estilo en línea
    La cadena de degradado ensamblada se aplica directamente a un elemento div como estilo de fondo en línea, así que el propio motor CSS del navegador renderiza la vista previa. No hay lienzo ni imagen involucrados: lo que ves es literalmente la propiedad CSS siendo aplicada.
  4. 4
    Salida lista para copiar en cuatro formatos
    Un selector de formato transforma la misma cadena de degradado en CSS plano (background: ...), un bloque CSS con alternativa sólida de respaldo, una clase de valor arbitrario de Tailwind, o una declaración de variable SCSS. Hacer clic en Copiar escribe la salida seleccionada en el portapapeles mediante navigator.clipboard.writeText. El degradado actual también se codifica en el hash de la URL para que puedas guardarlo en marcadores o compartirlo.

Herramientas relacionadas

🟦

Generador de CSS Grid

Diseña visualmente una cuadrícula CSS — pistas, unidades y espacios — y copia el CSS e HTML generados.

Probar
↔️

Generador de CSS Flexbox

Experimenta con dirección flex, ajuste, justificación y alineación en elementos en vivo — y copia el CSS.

Probar
🧮

Calculadora de Matrices

Suma, resta, multiplica, transpone, invierte y reduce matrices, además de determinante, rango, valores propios y resolución de Ax = b — hasta 8×8, con copia con un toque. Gratis y privado.

Probar

Preguntas frecuentes