Å skrive gradient-syntaks for hånd er fiklete: vinkelen, rekkefølgen på stoppene og prosentposisjonene påvirker hverandre, og en enkelt skrivefeil ødelegger hele background-erklæringen uten varsel. Denne generatoren holder forhåndsvisningen og koden i perfekt synk - det du ser er byte for byte den samme CSS-en du kopierer. Alt kjører client-side, så ingenting du designer blir lastet opp noe sted.
Gratis CSS Gradient Generator
Kjører helt i nettleseren - ingen opplasting, ingen registrering.
Type
Fargestopp
CSS-kode
Hva er en CSS gradient generator?
En CSS gradient generator er et visuelt verktøy som bygger koden for linear-gradient(), radial-gradient() eller conic-gradient() for deg. Velg farger, dra stoppene på plass, still inn vinkelen og kopier ferdig CSS mens en live forhåndsvisning viser nøyaktig det nettleseren vil tegne. Alt skjer i nettleseren din.
Slik bruker du verktøyet
- 1Velg gradienttype. Velg linear, radial eller conic. Linear viser en vinkel-slider; radial legger til form (sirkel eller ellipse) og posisjon; conic har en start-vinkel og posisjon.
- 2Sett fargestoppene. Klikk på hver fargeprøve for å velge en farge, og dra sliderene for å flytte stoppet langs gradienten. Legg til opptil 8 stopp, eller fjern ned til 2.
- 3Juster retningen. Dra vinkel-slideren (0-360 grader) eller velg et posisjonsnøkkelord. Forhåndsvisningen oppdateres live for hver endring.
- 4Kopier CSS-en. Trykk Kopier for å hente background-erklæringen, inkludert en enfarget fallback-linje, og lim den inn i stilarket ditt.
Hvem passer det for
- Frontend-utviklere som trenger en hero-, kort- eller knappbakgrunn og vil ha den eksakte
linear-gradient()-linjen uten å pugge syntaksen. - Web- og UI-designere som skal matche en mockup: gjenskap gradienten visuelt og gi den ferdige CSS-en rett til utviklerteamet.
- De som lager e-post og landingssider og trenger en enfarget fallback-linje slik at designet degraderer pålitelig i gamle klienter - resultatet inkluderer en automatisk.
- Studenter som lærer CSS og vil se hvordan vinkel, fargestopp og gradienttype endrer resultatet i sanntid.
Vanlige spørsmål
Er denne CSS gradient generatoren gratis?
Ja - helt gratis, ingen registrering, ingen vannmerker, ingen begrensninger. Bygg så mange gradienter du vil og kopier CSS-en rett inn i prosjektet ditt.
Blir noe lastet opp til en server?
Nei. Gradienten bygges og forhåndsvises helt i nettleseren din med vanlig JavaScript. Ingen farger, kode eller bruksdata sendes noe sted.
Hva er forskjellen på linear-, radial- og conic-gradienter?
En linear gradient blander farger langs en rett linje i en vinkel du velger. En radial gradient stråler utover fra et sentrumspunkt som en sirkel eller ellipse. En conic gradient feier farger rundt et sentrumspunkt, som et fargehjul eller kakediagram.
Hvordan fungerer fargestopp i CSS-gradienter?
Hvert stopp parer en farge med en posisjon fra 0 % til 100 % langs gradientlinjen. Nettleseren blander jevnt mellom naboliggende stopp. Å plassere to stopp på samme posisjon skaper en skarp kant i stedet for en overgang - nyttig for striper og kakediagram-effekter.
Hvilke nettlesere støtter disse gradientene?
Alle moderne nettlesere - Chrome, Firefox, Safari og Edge - støtter linear-gradient() og radial-gradient() uten prefiks; conic-gradient() har vært støttet overalt siden 2020. Den kopierte koden inkluderer også en enfarget fallback for eldre nettlesere.
Kan jeg bruke den genererte gradienten som tekstfarge?
Ikke direkte - gradienter er bilder, ikke farger. Bruk gradienten som background-image på tekstelementet, og legg til background-clip: text og color: transparent slik at gradienten vises gjennom bokstavene.
Hvorfor viser gradienten min banding?
Banding oppstår når to fjerntliggende stopp blander seg over en lang strekning med like nyanser, som avslører de 8-bits fargetrinnene. Reduser det ved å legge til et mellomliggende fargestopp, korte ned blandingsavstanden, eller velge farger som skiller seg i lyshet i tillegg til fargetone.