Hopp til hovedinnhold
LibraTool logoLibraTool

Gratis CSS-gradientgenerator

Lag lineære, radiale og koniske CSS-gradienter med direkte forhåndsvisning. Kopier CSS-en med ett klikk.

Fungerer uten nett når den er lastet
background: linear-gradient(135deg, #14b8a6 0%, #6366f1 100%);

Unngår grå midtpunkter mellom veldig ulike farger. Legger til en vanlig sRGB-linje som reserve for eldre nettlesere.

0%
100%

Forhåndsinnstillinger

Vanlige bruksområder

  • Opprett gradienter for hjelteseksjonerDesign helsidegradient bakgrunner for nettstedets hjelteseksjoner og landingssider.
  • Opprett gradientknapper og CTA-erDesign iøynefallende gradientknappbakgrunner for oppfordringer til handling som skiller seg ut.
  • Opprett gradientbakgrunner for kortDesign gradientfyllinger for kort, modaler, sidepaneler og UI-komponentbakgrunner.
  • Opprett gradienter for sosiale mediebildeDesign levende gradientbakgrunner for Instagram-innlegg, YouTube-miniatyrbilder og Twitter-kort.
  • Opprett fargeskalaer for diagrammerGenerer gradientfargeskalaer for varmekart, fremdriftslinjer og datavisualiseringer.

Hvordan det fungerer

Gradientgeneratoren bygger CSS-gradientstrenger direkte i nettleseren — ingen bibliotek, ingen server, ingen opplasting. En håndskrevet funksjon setter sammen riktig syntaks for linear-gradient, radial-gradient eller conic-gradient fra fargestoppene og vinkelen din i sanntid, og formaterer resultatet for valgt utdataformat.

  1. 1
    Still inn stopp og retning
    Du velger mellom 2 og 6 fargestopp med nettleserens innebygde fargevelger, og plasserer hvert stopp langs aksen 0–100 % med en skyveknapp. For lineære og koniske gradienter velger du også en vinkel (0–360°); for radiale gradienter velger du form (ellipse eller sirkel) og størrelsesnøkkelordet som styrer hvor langt gradienten strekker seg.
  2. 2
    buildCss setter sammen gradientstrengen
    Ved hver endring setter en lokal buildCss-funksjon sammen parameterne til riktig CSS-funksjonskall — f.eks. linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). Ingen bibliotek er involvert; strengen bygges med vanlig JavaScript-mallogikk og slås sammen direkte fra stoppmatrisen.
  3. 3
    Live forhåndsvisning via inline-stil
    Den sammensatte gradientstrengen brukes direkte på et div-element som inline bakgrunnsstil, så nettleserens egen CSS-motor tegner forhåndsvisningen. Ingen canvas eller bilde er involvert — det du ser er bokstavelig talt CSS-egenskapen i bruk.
  4. 4
    Ferdig til kopiering i fire formater
    En formatvelger gjør den samme gradientstrengen om til ren CSS (background: ...), en CSS-blokk med ensfarget reserve, en Tailwind-klasse med vilkårlig verdi eller en SCSS-variabeldeklarasjon. Klikk på Kopier skriver valgt utdata til utklippstavlen via navigator.clipboard.writeText. Den gjeldende gradienten kodes også i URL-hashen, så du kan bokmerke eller dele den.

Relaterte verktøy

🟦

CSS Grid-generator

Utform et CSS-rutenett visuelt — spor, enheter og mellomrom — og kopier den genererte CSS og HTML.

Prøv det
↔️

CSS Flexbox-generator

Eksperimenter med flex-retning, ombrytning, justify og align på live-elementer — og kopier CSS.

Prøv det
🧮

Matrisekalkulator

Legg sammen, trekk fra, multipliser, transponer, inverter og reduser matriser, pluss determinant, rang, egenverdier og løsning av Ax = b — opptil 8×8, med kopiering med ett trykk. Gratis og privat.

Prøv det

Ofte stilte spørsmål