CSS-gradient-generator
Hva er CSS-gradient-generator
CSS-gradient-generatoren lar deg bygge gradienter visuelt: velg farger og posisjoner, juster vinkel eller form, og se resultatet live. Den ferdige CSS-koden kopieres med ett klikk.
Slik bruker du det
- Velg gradienttype: lineær eller radial.
- Legg til fargestopp og juster posisjonene.
- Sett vinkelen eller formen.
- Kopier den genererte CSS-koden.
Når du bør bruke det
Praktisk når du lager bakgrunner til hero-seksjoner og knapper, eksperimenterer med fargeoverganger uten å skrive CSS for hånd, eller finpusser en gradient til du er fornøyd med uttrykket.
Ofte stilte spørsmål
Hva er forskjellen mellom en lineær og en radial gradient?
En lineær gradient går mellom farger langs en rett linje i en fast vinkel, som en solnedgang som falmer fra oransje til lilla. En radial gradient går mellom farger utover fra et midtpunkt i en sirkel eller ellipse, som et spotlys eller en glødeeffekt.
Hvor mange fargestopp kan jeg legge til?
Så mange du vil. Hver gradient trenger minst to stopp for å vises, og du kan legge til flere med knappen Legg til fargestopp for å lage flerfargede overganger som regnbuer eller merkevarepaletter.
Hva betyr posisjonsprosenten på hvert stopp?
Posisjonen angir hvor den fargen når full styrke langs gradienten, fra 0 % (starten) til 100 % (slutten). Å flytte et stopps posisjon endrer hvor fargen dominerer og hvordan den blandes med naboene.
Fungerer den genererte CSS-en i alle nettlesere?
Ja. linear-gradient() og radial-gradient() er standard CSS-funksjoner som støttes av alle moderne nettlesere, uten behov for leverandørprefikser.
Kan jeg dele verktøyet med gradienten min fylt inn?
Ja. Nettadressen oppdateres automatisk mens du bygger gradienten. Kopier den fra adressefeltet eller bruk Del-knappen, og alle som åpner lenken ser nøyaktig samme gradient.
Relaterte verktøy
Bildeforhold Kalkulator
Regn ut bildeforholdet, finn manglende bredde eller høyde og endre størrelse på bilder og video uten å forvrenge proporsjonene. Gratis.
Strekkode-generator
Lag strekkoder gratis på nett. Støtter EAN-13 og Code 128. Last ned som SVG eller PNG i høy oppløsning — alt genereres i nettleseren.
Base64-dekoder
Dekod Base64 til vanlig tekst direkte i nettleseren. Gratis Base64-dekoder med full UTF-8-støtte. Lim inn strengen og få resultatet med en gang.