Vés al contingut principal
LibraTool logoLibraTool

Generador de degradats CSS de franc

Crea degradats CSS lineals, radials i cònics amb previsualització en viu. Copia el CSS amb un clic.

Funciona sense connexió un cop carregat
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Evita els punts mitjans grisos entre colors molt diferents. Afegeix una línia sRGB simple com a alternativa per a navegadors antics.

0%
100%

Predefinits

Usos habituals

  • Creeu gradients per a seccions de heroiDissenyeu fons de gradient de pàgina completa per a les seccions de heroi del lloc web i les pàgines de destinació.
  • Creeu botons de gradient i CTADissenyeu fons de botons de gradient atractius per a crides a l'acció que destaquen.
  • Creeu fons de gradient per a targetesDissenyeu omplements de gradient per a targetes, diàlegs modals, barres laterals i fons de components de la interfície d'usuari.
  • Creeu gradients per a gràfics de xarxes socialsDissenyeu fons de gradient vibrants per a publicacions d'Instagram, miniatures de YouTube i targetes de Twitter.
  • Creeu escales de color per a gràficsGenereu escales de color de gradient per a mapes de calor, barres de progés i visualitzacions de dades.

Com funciona

El generador de degradats construeix cadenes de degradat CSS directament al navegador — sense biblioteca, sense servidor, sense pujada. Una funció escrita a mà assembla la sintaxi correcta linear-gradient, radial-gradient o conic-gradient a partir dels teus punts de color i l'angle en temps real, i després formata el resultat per a qualsevol destinació de sortida que triïs.

  1. 1
    Configura punts i direcció
    Estableixes entre 2 i 6 punts de color utilitzant el selector de color natiu del navegador, i després poses cada punt al llarg de l'eix del 0 al 100% amb un control lliscant de rang. Per als degradats lineals i cònics també tries un angle (0–360°); per als degradats radials tries la forma (el·lipse o cercle) i la paraula clau de mida que controla fins on s'estén el degradat.
  2. 2
    buildCss assembla la cadena del degradat
    A cada canvi, una funció local buildCss concatena els teus paràmetres en la crida de funció CSS correcta — per exemple, linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). No hi ha cap biblioteca implicada; la cadena es construeix amb lògica de plantilla simple de JavaScript i s'uneix directament des de la matriu de punts.
  3. 3
    La previsualització en directe es renderitza via estil en línia
    La cadena de degradat assemblada s'aplica directament a un element div com a estil de fons en línia, així que el propi motor CSS del navegador renderitza la previsualització. No hi ha cap canvas ni imatge implicada — el que veus és literalment la propietat CSS que s'aplica.
  4. 4
    Sortida a punt per copiar en quatre formats
    Un selector de format transforma la mateixa cadena de degradat en CSS pla (background: ...), un bloc CSS amb alternativa sòlida, una classe de valor arbitrari de Tailwind, o una declaració de variable SCSS. Fer clic a Copia escriu la sortida seleccionada al porta-retalls via navigator.clipboard.writeText. El degradat actual també es codifica al hash de l'URL perquè el puguis desar a preferits o compartir.

Eines relacionades

🟦

Generador de CSS Grid

Dissenya visualment una CSS grid — pistes, unitats i buits — i copia el CSS i HTML generat.

Prova-ho
↔️

Generador de CSS Flexbox

Experimenta amb direcció flex, wrap, justify i align en elements en viu — i copia el CSS.

Prova-ho
🧮

Calculadora de Matrius

Suma, resta, multiplica, transposa, inverteix i redueix matrius, a més de determinant, rang, valors propis i resolució d'Ax = b — fins a 8×8, amb còpia amb un toc. Gratuït i privat.

Prova-ho

Preguntes freqüents