At skrive gradient-syntaks i hånden er besværligt: vinklen, rækkefølgen af stop og procentvise placeringer påvirker hinanden, og en enkelt tastefejl ødelægger stille og roligt hele background-egenskaben. Denne generator holder forhåndsvisning og kode fuldstændig synkroniseret - det, du ser, er tegn for tegn præcis den CSS, du kopierer. Det kører udelukkende i browseren, så intet af det, du designer, bliver sendt nogen steder hen.
Gratis CSS Gradient Generator
Kører helt i din browser - ingen upload, ingen tilmelding.
Type
Farvestop
CSS-kode
Hvad er en CSS gradient generator?
En CSS gradient generator er et visuelt værktøj, der skriver koden til linear-gradient(), radial-gradient() eller conic-gradient() for dig. Du vælger farverne, trækker stoppenes placering, indstiller vinklen, og den færdige CSS-kode dukker straks op, mens live-forhåndsvisningen viser præcis, hvad browseren kommer til at vise. Det hele foregår i din browser.
Sådan gør du
- 1Vælg gradienttype. Vælg lineær, radial eller konisk. Lineær viser en vinkelskyder; radial tilføjer form (cirkel eller ellipse) og placering; konisk har en startvinkel og en placering.
- 2Indstil dine farvestop. Klik på hver farveprøve for at vælge en farve, og træk i skyderen for at flytte stoppet langs gradienten. Tilføj op til 8 stop, eller fjern dem ned til 2.
- 3Justér retningen. Træk i vinkelskyderen (0-360 grader), eller vælg et positionsnøgleord. Forhåndsvisningen opdateres live ved hver ændring.
- 4Kopiér CSS-koden. Klik på Copy for at hente background-erklæringen, inklusive en ensfarvet reservelinje, og indsæt den i dit stylesheet.
Hvem er det til
- Frontend-udviklere, der skal bruge en baggrund til en hero-sektion, et kort eller en knap og vil have den præcise
linear-gradient()-linje uden at skulle huske syntaksen udenad. - Web- og UI-designere, der matcher en mockup: genskab gradienten visuelt, og send derefter den genererede CSS direkte videre til udviklerteamet.
- De, der bygger e-mails og landingssider, og som har brug for en ensfarvet reservelinje, så designet nedgraderes pænt i ældre klienter - resultatet inkluderer automatisk en sådan.
- Studerende, der lærer CSS, og som gerne vil se i realtid, hvordan vinkel, farvestop og gradienttype ændrer det viste resultat.
Ofte stillede spørgsmål
Er denne CSS gradient generator gratis?
Ja - 100% gratis, ingen tilmelding, ingen vandmærker, ingen begrænsninger. Byg lige så mange gradienter, du vil, og kopiér CSS-koden direkte ind i dit projekt.
Bliver der uploadet noget til en server?
Nej. Gradienten bygges og forhåndsvises udelukkende i din browser med almindelig JavaScript. Ingen farver, kode eller brugsdata bliver sendt nogen steder hen.
Hvad er forskellen på en lineær, radial og konisk gradient?
En lineær gradient blander farver langs en lige linje i den vinkel, du vælger. En radial gradient stråler udad fra et centerpunkt som en cirkel eller ellipse. En konisk gradient fejer farver rundt om et centerpunkt, ligesom et farvehjul eller et lagkagediagram.
Hvordan fungerer farvestop i CSS-gradienter?
Hvert stop parrer en farve med en placering fra 0% til 100% langs gradientlinjen. Browseren blander glidende mellem naboliggende stop. Placerer du to stop samme sted, opstår der en skarp kant i stedet for en blødt overgang - nyttigt til striber eller lagkagediagram-effekter.
Hvilke browsere understøtter disse gradienter?
Alle moderne browsere - Chrome, Firefox, Safari og Edge - understøtter linear-gradient() og radial-gradient() uden præfiks; conic-gradient() har været understøttet overalt siden 2020. Den kopierede kode indeholder også en ensfarvet reserve til alt, der er ældre.
Kan jeg bruge den genererede gradient som tekstfarve?
Ikke direkte - gradienter er billeder, ikke farver. Anvend gradienten som background-image på tekstelementet, og tilføj så background-clip: text og color: transparent, så gradienten skinner igennem bogstaverne.
Hvorfor viser min gradient striber (banding)?
Striber opstår, når to fjerntliggende stop blandes over en lang strækning af ens nuancer og dermed afslører de 8-bit farvetrin. Reducér det ved at tilføje et mellemliggende farvestop, forkorte blandingsafstanden eller vælge farver, der adskiller sig i både lyshed og nuance.