Gå til hovedindhold
LibraTool logoLibraTool

Gratis CSS-gradientgenerator

Opret lineære, radiale og koniske CSS-gradienter med liveforhåndsvisning. Kopiér CSS med ét klik.

Virker offline, når den er indlæst
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Undgår grå mellempunkter mellem meget forskellige farver. Tilføjer en almindelig sRGB-linje som reserve til ældre browsere.

0%
100%

Forudindstillinger

Almindelige anvendelser

  • Opret gradienter til hjeltesektionerDesign gradient baggrunde på helsides til websted hjeltesektioner og landingssider.
  • Opret gradientknapper og CTA'erDesign iøjnefaldende gradientknap baggrunde til opfordringer til handling, der skiller sig ud.
  • Opret gradientbaggrunde til kortDesign gradientudfyldninger til kort, modale vindue, sidepaneler og UI-komponentbaggrunde.
  • Opret gradienter til socialt medie grafikDesign levende gradientbaggrunde til Instagram-indlæg, YouTube-miniaturer og Twitter-kort.
  • Opret farveskalaer til diagrammerGenerer gradient farveskalaer til varmeort, fremskridtslinjer og datavisualiseringer.

Sådan fungerer det

Gradientgeneratoren bygger CSS-gradientstrenge direkte i browseren — intet bibliotek, ingen server, ingen upload. En håndskrevet funktion sammensætter den korrekte syntaks for linear-gradient, radial-gradient eller conic-gradient ud fra dine farvestop og vinkel i realtid og formaterer resultatet til det output, du vælger.

  1. 1
    Indstil stop og retning
    Du vælger mellem 2 og 6 farvestop med browserens indbyggede farvevælger og placerer hvert stop langs aksen 0–100 % med en skyder. For lineære og koniske gradienter vælger du også en vinkel (0–360°); for radiale gradienter vælger du formen (ellipse eller cirkel) og det størrelsesnøgleord, der styrer, hvor langt gradienten rækker.
  2. 2
    buildCss sammensætter gradientstrengen
    Ved hver ændring sammensætter en lokal buildCss-funktion dine parametre til det korrekte CSS-funktionskald — f.eks. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Der indgår intet bibliotek; strengen bygges med almindelig JavaScript-skabelonlogik og sammenføjes direkte fra stop-arrayet.
  3. 3
    Live forhåndsvisning via inline-stil
    Den sammensatte gradientstreng anvendes direkte på et div-element som inline background-stil, så browserens egen CSS-motor tegner forhåndsvisningen. Der indgår intet canvas eller billede — det, du ser, er bogstaveligt talt CSS-egenskaben, der anvendes.
  4. 4
    Output klar til kopiering i fire formater
    En formatvælger omdanner den samme gradientstreng til ren CSS (background: ...), en CSS-blok med ensfarvet reserve, en Tailwind-klasse med vilkårlig værdi eller en SCSS-variabeldeklaration. Klik på Kopiér skriver det valgte output til udklipsholderen via navigator.clipboard.writeText. Den aktuelle gradient kodes også i URL-hashen, så du kan bogmærke eller dele den.

Relaterede værktøjer

🟦

CSS Grid-generator

Design visuelt et CSS-grid — spor, enheder og mellemrum — og kopier det genererede CSS og HTML.

Prøv det
↔️

CSS Flexbox-generator

Eksperimentér med flex-retning, ombrydning, justering og justering på live-elementer — og kopier CSS.

Prøv det
🧮

Matrix-beregner

Læg sammen, træk fra, gang, transponér, invertér og reducér matricer, plus determinant, rang, egenværdier og løsning af Ax = b — op til 8×8, med kopiering med ét tryk. Gratis og privat.

Prøv det

Ofte stillede spørgsmål