Grunnleggende om CSS-gradienter
CSS-gradienter gjør det mulig å vise jevne overganger mellom to eller flere farger som bakgrunner på nettsider. I stedet for å bruke tunge bildefiler, genererer nettleseren disse overgangene direkte ved hjelp av kode. Dette gir raskere innlastingstid og skalerbar grafikk som ser skarp ut på alle skjermoppløsninger.
Med dette verktøyet kan du konfigurere tre ulike gradienttyper: lineær, radial og konisk. Hver type fordeler fargene på sin egen måte ut fra matematiske prinsipper, og du kan tilpasse resultatet ved å justere vinkler, former og opptil åtte individuelle fargepunkter.
Forstå lineære gradienter: Retning og fargepunkter
En lineær gradient blander farger langs en rett linje. Retningen på denne linjen bestemmes av en vinkelverdi angitt i grader (°).
Når du konfigurerer en lineær gradient, gjelder følgende regler for retningen:
- 0° peker rett opp.
- 90° peker direkte til høyre.
- Mellomliggende verdier roterer retningen med klokken.
Fargene fordeler seg langs denne aksen basert på posisjonen til hvert fargepunkt. Starten av gradienten defineres som 0%, mens slutten av gradienten er 100%. Ved å endre vinkelen flytter du hele fargeovergangen rundt i planet, noe som er nyttig for å skape dynamiske bakgrunner som leder blikket i en bestemt retning.
Utforsk radiale gradienter: Former og fargefordeling
En radial gradient sprer fargene utover fra et sentralt punkt i stedet for å følge en rett linje. Fargene stråler utover i alle retninger, nesten som en lyskilde.
Radiale gradienter bruker ikke en vinkelverdi. I stedet defineres formen på spredningen ved å velge mellom to geometriske figurer under Form:
- Ellipse: Fargene strekker seg ulikt i høyde og bredde, tilpasset proporsjonene til elementet.
- Sirkel: Fargene sprer seg helt jevnt og sirkulært i alle retninger, uavhengig av elementets bredde og høyde.
Fargepunktene fordeler seg fra sentrum (0%) og ut til den ytre kanten av formen (100%). Dette gir en myk overgang som egner seg godt til å fremheve elementer eller skape dybdeeffekter i webdesign.
Koniske gradienter: Fargesveip rundt et sentrum
En konisk (conic) gradient skiller seg ut ved at fargene sveipes rundt et sentralt punkt i stedet for å stråle utover eller følge en linje. Resultatet minner om et fargehjul eller en kakediagram-struktur.
For koniske gradienter bruker du vinkelbryteren under Vinkel til å bestemme startretningen for sveipet. Akkurat som med lineære gradienter vil en vinkel på 0° starte sveipet pekende rett opp, mens 90° starter sveipet pekende mot høyre. Fargene fordeler seg deretter i en sirkulær bevegelse med klokken fra 0% til 100% rundt midtpunktet.
Fargepunktenes rolle i gradientdesign
Fargepunkter (color stops) bestemmer nøyaktig hvilke farger som skal inngå i gradienten, og hvor på overgangen de skal plasseres. Hvert fargepunkt består av to verdier:
- Farge på punkt: Selve fargeverdien.
- Posisjon: En prosentverdi fra 0% til 100% som låser fargen til et bestemt sted langs gradientens forløp.
Verktøyet starter med to standard fargepunkter: #6366f1 0% og #ec4899 100%. Du kan legge til flere farger for å skape mer komplekse overganger.
Når du klikker på Legg til fargepunkt, vil det nye punktet automatisk plasseres på posisjonen 50%. Du kan bruke opptil åtte fargepunkter totalt. Når du har nådd denne grensen, blir knappen Legg til fargepunkt deaktivert. Hvis du ønsker å fjerne et punkt, bruker du knappen Fjern fargepunkt.
Slik bruker du Gradient-generator effektivt
For å lage og hente ut en tilpasset CSS-gradient følger du disse trinnene i grensesnittet:
- Velg gradienttype: Under Gradienttype velger du enten Lineær, Radial eller Konisk (conic).
- Angi retning eller form:
- For Lineær og Konisk (conic) justerer du Vinkel for å styre retningen.
- For Radial velger du enten Ellipse eller Sirkel under Form.
- Konfigurer fargepunkter: Juster fargene og posisjonene under Fargepunkter. Bruk Legg til fargepunkt for å utvide med flere farger, eller Fjern fargepunkt for å redusere antallet.
- Kopier koden: Under CSS ser du den ferdige koden. Klikk på Kopier CSS. Knappen endrer umiddelbart tekst til Copied for å bekrefte at koden er lagret på utklippstavlen din.
Hele prosessen foregår med en live forhåndsvisning øverst, slik at du umiddelbart ser hvordan endringene påvirker det visuelle resultatet.
Personvern og databehandling
Når du bruker dette verktøyet, blir alle beregninger og visualiseringer utført lokalt på din egen enhet. Hver gradient rendres direkte i nettleseren din, og ingenting du angir her lastes opp til BroBroGo. Dette betyr at fargevalg, koder og innstillinger forblir helt private på din maskin under hele prosessen.
Ofte stilte spørsmål (FAQ)
Hva er forskjellen på lineære, radiale og koniske gradienter?
En lineær gradient blander farger langs en rett linje du styrer med en vinkel. En radial gradient sprer dem utover fra sentrum i en sirkel eller ellipse. En konisk (conic) gradient sveiper dem rundt sentrum som et fargehjul.
Hva er fargepunkter?
Hvert fargepunkt (color stop) er en farge låst til en posisjon langs gradienten — 0% ved starten, 100% ved slutten. Flytt et punkt for å endre hvor fargen topper seg, eller legg til flere punkter for en rikere blanding. Du kan bruke opptil åtte.
Hvordan styrer jeg retningen?
For en lineær eller konisk gradient bestemmer vinkelbryteren retningen — 0° peker opp, 90° peker til høyre. En radial gradient har ingen vinkel; velg i stedet en sirkel- eller ellipseform for å endre hvordan den sprer seg.