Vigtigste punkter
- 01Alle tre CSS-gradient-typer — lineær, radial og konisk — understøttes med live preview.
- 02Tilføj op til seks farvestop, hver med uafhængig position og farve.
- 03Outputtet er en komplet background-erklæring klar til at indsætte i ethvert stylesheet.
- 04Ingen tilmelding, ingen installation, og intet uploadet — alt kørende i din browser.
Hvorfor bruge en visuell gradient-generator?
At skrive CSS-gradienter for hånd bliver kedeligt hurtigt. Syntaksen er læsbar når du først kender den, men at vælge eksakte stop-positioner og farver uden et visuelt preview gør en simpel designbeslutning til trial-and-error i DevTools. En generator lader dig se resultatet i realtid og eksportere ren kode i det øjeblik det ser rigtigt ud.
Dette værktøj understøtter alle tre moderne gradient-typer. Lineær er den klassiske retningsorienterede blanding du bruger til hero-baggrunde og knapper. Radial spreder sig udad fra et punkt — fantastisk til spotlight-effekter og vignetmeringer. Konisk fejer omkring et center, hvilket gør det til valget for pie-chart-segmenter, farvhjul og spinner-indikatorer. Start fra en af de byggede præsetter (Lime Swiss, Sunset, Sky, Aurora) eller design fra bunden.
Sådan genererer du en CSS-gradient
Hele processen tager mindre end et minut.
- 01
Vælg en gradienttype
Vælg Lineær, Radial eller Konisk fra typevælgeren. Til lineær, indstil også vinklen. Preview'et opdateres øjeblikkeligt.
- 02
Tilføj og positionér farvestop
Klik Tilføj Stop for at indsætte et nyt stop, træk derefter dets glidebaneliver eller skriv en procent for at positionere det. Op til seks stop understøttes — stop omsortering efter position automatisk.
- 03
Vælg hver stops farve
Klik på farveprøven for at åbne systemets farveplukkeren, eller skriv en hex-værdi direkte. Både RGB og hex-formater fungerer.
- 04
Preview i realtid
Preview-panelet gengiver din gradient ved brug af browserens native gradient-motor, så resultatet matcher præcis hvad CSS vil producere i produktion.
- 05
Kopier CSS-erklæringen
Klik Kopier for at få den komplette background: linear-gradient(...) erklæring. Indsæt den i et stylesheet, en styled komponent, eller en Tailwind vilkårlig værdi som bg-[<value>].
Almindelige gradient use cases
Hver gradient-type udbilledrer sig selv i et forskelligt scenario.
- 01Hero-sektions baggrunde — lineær gradient ved 135° til en moderne diagonal fejeeffekt.
- 02Knap hover-tilstande — subtil to-stop lineær gradient til dybde.
- 03Radial spotlight eller vignet — mørkt-til-gennemsigtigt radial på et billedoverlay.
- 04Pie charts og progressringe — konisk gradient med hårde stop.
- 05Farvhjul-vælger previews — fuldspektrum konisk gradient.
- 06Tekstgradienter — anvend gradienten på baggrunden, brug derefter background-clip: text.
Kørende fuldstændigt i din browser
Gradient-generatoren kører 100% klient-side — ingen data sendes til nogen server. Preview'et gengives af din browsers egen CSS-motor, hvilket betyder at det du ser matcher hvad enhver besøgendes browser gengiver med samme CSS.
En praktisk bemærkning: email-klienter har stadig slettet understøttelse for CSS-gradienter. Hvis du indsætter genereret CSS i en HTML-email-skabelon, tilføj en solid background-color fallback før gradienterklæringen, så modtagere på ældre klienter ser noget rimelig.
CSS Gradient Generator FAQ
Hvad er forskellen mellem lineær, radial og koniske gradienter?
Lineære gradienter skifter langs en lige linje i en given vinkel. Radiale gradienter spreder sig udad fra et centerpunkt — nyttigt til højdepunkter og pleteffekter. Koniske gradienter fejer omkring et center som urviser — ideelt til pie-segmenter og farvhjul.
Kan jeg bruge dette til Tailwind CSS-projekter?
Ja. Kopier den genererede værdi og brug den som en Tailwind vilkårlig værdi, for eksempel: bg-[linear-gradient(135deg,#ff6b6b,#4ecdc4)]. Tailwind vil inkludere det i dit output-stylesheet.
Matcher preview'et præcist hvad jeg ser på live-siden?
Ja — preview'et gengives af samme browser gradient-motor der gengiver dit live CSS, så outputtet er pixel-nøjagtigt.
Kan jeg bruge CSS-gradienter i email-skabeloner?
De fleste email-klienter understøtter CSS-gradienter ikke pålideligt. Tilføj altid en solid background-color før din gradienterklæring som fallback.
Er der en grænse for antallet af farvestop?
Generatoren understøtter op til seks stop. For de fleste designs er to til fire nok; mere end seks plejer at reducere klarhed i stedet for at tilføje rigdom.