CSS-gradientgenerator
Hvad er CSS-gradientgenerator
En CSS-gradientgenerator lader dig bygge en lineær eller radial gradient visuelt og kopiere den præcise CSS. Vælg en gradienttype, indstil vinklen (lineær) eller formen og positionen (radial), tilføj lige så mange farvestop, du har brug for, og træk hvert af dem til det rette sted. Forhåndsvisningen opdateres med det samme, og outputfeltet viser altid en klistreklar background-deklaration.
Sådan bruger du det
- Vælg Lineær eller Radial som gradienttype.
- Juster vinkelskyderen for lineære gradienter, eller vælg en form og position for radiale.
- Indstil farve og position for hvert farvestop, og tilføj flere stop med knappen Tilføj farvestop.
- Kopiér den genererede CSS fra outputfeltet, og indsæt den i dit stylesheet.
Hvornår du bør bruge det
Bygger du en hero-sektion og skal bruge en blød baggrund fra blå til pink? Indstil to stop ved 0 % og 100 %, vælg en vinkel, og kopiér background: linear-gradient(90deg, #3B82F6 0%, #EC4899 100%); direkte ind i din CSS. Lige så praktisk til kortoverlay, knappers hover-tilstande eller et radialt skær bag et logo, uden at finjustere gradientsyntaks i devtools.
Ofte stillede spørgsmål
Hvad er forskellen på en lineær og en radial gradient?
En lineær gradient overgår farver langs en lige linje i en fast vinkel, som en solnedgang der falmer fra orange til lilla. En radial gradient overgår farver udad fra et centerpunkt i en cirkel eller ellipse, som en spotlight eller en glødeeffekt.
Hvor mange farvestop kan jeg tilføje?
Så mange du vil. Hver gradient kræver mindst to stop for at blive vist, og du kan tilføje flere med knappen Tilføj farvestop for at skabe flerfarvede overgange som regnbuer eller brandpaletter.
Hvad betyder positionsprocenten på hvert stop?
Positionen angiver, hvor den pågældende farve når fuld styrke langs gradienten, fra 0 % (starten) til 100 % (slutningen). At flytte et stops position ændrer, hvor farven dominerer, og hvordan den blandes med naboerne.
Virker den genererede CSS i alle browsere?
Ja. linear-gradient() og radial-gradient() er standard CSS-funktioner, der understøttes af alle moderne browsere uden behov for vendor-præfikser.
Kan jeg dele værktøjet med min gradient udfyldt?
Ja. Webadressen opdateres automatisk, mens du bygger din gradient. Kopiér den fra adressefeltet, eller brug Del-knappen, og alle, der åbner linket, ser præcis samme gradient.
Relaterede værktøjer
Billedformat Beregner
Beregn billedformatet, find den manglende bredde eller højde og skift størrelse på billeder og video uden at forvrænge proportionerne. Gratis.
Stregkodegenerator
Generer EAN-13- eller Code 128-stregkoder online. Indtast dit tal eller din tekst, download som SVG eller PNG. Gratis, ingen tilmelding nødvendig.
Base64-dekoder
Dekod Base64-strenge til almindelig tekst direkte i din browser. Understøtter fuldt Unicode-output inklusive emojis. Gratis Base64-dekoder online.