Saltar ao contido principal
LibraTool logoLibraTool

Xerador de degradados CSS de balde

Crea degradados CSS lineais, radiais e cónicos cunha previsualización en directo. Copia o CSS cun só clic.

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

Evita puntos medios grises entre cores moi distintas. Engade unha liña sRGB simple como alternativa para navegadores antigos.

0%
100%

Predefinidos

Usos habituais

  • Crear Gradientes para Seccións de HeroeDeseñar fondos de gradiente de páxina completa para seccións de heroe do sitio e páxinas de destino.
  • Crear Botóns de Gradiente e CTAsDeseñar fondos de botóns de gradiente que chamen a atención para chamadas á acción destacadas.
  • Crear Fondos de Gradiente para TarxetasDeseñar recheos de gradiente para tarxetas, modais, barras laterais e fondos de compoñentes UI.
  • Crear Gradientes para Gráficos de Redes SociaisDeseñar fondos de gradiente vibrante para publicacións de Instagram, miniaturas de YouTube e tarxetas de Twitter.
  • Crear Escalas de Cor para GráficosXerar escalas de cor de gradiente para mapas de calor, barras de progreso e visualizacións de datos.

Como funciona

O xerador de degradado constrúe cadeas de degradado CSS directamente no navegador — sen biblioteca, sen servidor, sen subida. Unha función escrita a man monta a sintaxe correcta de linear-gradient, radial-gradient ou conic-gradient a partir dos teus puntos de cor e ángulo en tempo real, e despois formatea o resultado para o obxectivo de saída que escollas.

  1. 1
    Configura puntos e dirección
    Estableces entre 2 e 6 puntos de cor usando o selector de cor nativo do navegador, e despois posicionas cada punto ao longo do eixe 0–100% cun control deslizante de rango. Para degradados lineais e cónicos tamén escolles un ángulo (0–360°); para degradados radiais escolles a forma (elipse ou círculo) e a palabra clave de tamaño que controla ata onde se estende o degradado.
  2. 2
    buildCss monta a cadea do degradado
    En cada cambio, unha función local buildCss concatena os teus parámetros na chamada de función CSS correcta — por exemplo, linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Non hai ningunha biblioteca implicada; a cadea constrúese con lóxica de plantilla JavaScript simple e únese directamente a partir do array de puntos.
  3. 3
    A vista previa en directo renderízase mediante estilo en liña
    A cadea de degradado montada aplícase directamente a un elemento div como estilo de fondo en liña, así que o propio motor CSS do navegador renderiza a vista previa. Non hai lenzo nin imaxe implicados — o que ves é literalmente a propiedade CSS que se aplica.
  4. 4
    Saída lista para copiar en catro formatos
    Un selector de formato transforma a mesma cadea de degradado en CSS simple (background: ...), un bloque CSS con reserva de cor sólida, unha clase de valor arbitrario de Tailwind ou unha declaración de variable SCSS. Facer clic en Copiar escribe a saída seleccionada ao portapapeis mediante navigator.clipboard.writeText. O degradado actual tamén se codifica no hash da URL para que o poidas marcar ou compartir.

Ferramentas relacionadas

🟦

Xerador de Grid CSS

Deseña visualmente unha grid CSS — pistas, unidades e espazos — e copia o CSS e HTML xerados.

Próbao
↔️

Xerador de Flexbox CSS

Experimenta coa dirección, axuste, xustificación e aliñamento flex en elementos en directo — e copia o CSS.

Próbao
🧮

Calculadora de Matrices

Suma, resta, multiplica, transpón, inverte e reduce matrices, ademais de determinante, rango, valores propios e resolución de Ax = b, ata 8×8, con copia dun toque. Gratis e privado.

Próbao

Preguntas frecuentes