Preview
Genererede CSS-forløbskontrolelementer
forløbskontrolelementer
Populære forudindstillinger
Gradienteksempler
Udforsk disse fantastiske gradienteksempler, og bliv inspireret til dit næste projekt. Klik på en hvilken som helst gradient for at indlæse den i generatoren.
Sunset Blush
En varm gradient inspireret af smukke solnedgange.
på havbrise
En rolig hældning, der fremkalder følelsen af kystnære farvande.
Mint Fusion
En frisk og moderne gradient, der kombinerer mint og himmelblå.
Frodig have
En levende gradient, der repræsenterer naturens skønhed.
Cosmic Dream
En magisk gradient inspireret af nattehimlen.
Gylden time
En varm gradient, der fanger essensen af tusmørke.
Gradientdokumentation
Hvad er CSS-gradienter?
CSS-gradienter giver dig mulighed for at vise jævne overgange mellem to eller flere farver. De kan bruges som baggrunde for elementer og findes i tre forskellige typer:
- Lineære forløb:Overgangsfarver langs en lige linje.
- Radiale forløb:Overgangsfarver fra et midtpunkt og udad.
- Kegleforløb:Overgangsfarver omkring et midtpunkt i en cirkel.
Sådan bruger du gradienter
Når du har genereret en gradient ved hjælp af vores værktøj, kan du bruge CSS-koden i dine projekter:
- Kopier CSS-koden fra generatoren.
- Indsæt den i CSS-filen, eller brug den indbygget i HTML-elementerne.
- Anvend farveforløbet på et hvilket som helst element ved hjælp af
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- Brug mere end to farver for at få en mere kompleks farveforløbseffekt.
- Juster farvepositioner for at styre, hvor overgange forekommer.
- Kombiner flere farveforløb for at få endnu flere kreative effekter.
- For koniske gradienter skaber ændring af centrum interessante mønstre.
- Gem dine yndlingsgradienter til senere brug.
Browserunderstøttelse
CSS-gradienter understøttes bredt i moderne browsere. Ældre browsere som Internet Explorer gengiver dem dog muligvis ikke korrekt. Angiv altid en reservefarve:
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
Om dette værktøj
Vores CSS Gradient Generator er designet til at hjælpe udviklere og designere med at skabe smukke gradienter uden besvær. Uanset om du arbejder på en hjemmeside, applikation eller bare vil eksperimentere med farver, gør dette værktøj det nemt at generere den perfekte gradient til dit projekt.
Features
Brugervenlig
intuitiv grænseflade til oprettelse af gradienter.
Responsivt design
fungerer perfekt på alle skærmstørrelser.
Kopier-indsæt klar
Få ren CSS-kode med det samme.
Tilgængelige
Start med smukke foruddefinerede farveforløb.
Related Tools
Sass til CSS konverter
Omdan din Sass-kode til CSS. Hurtigt, nemt og sikkert.
CSS til LESS-konverter
Omdan din CSS-kode til LESS med variabler, indlejring og meget mere. Hurtigt, nemt og sikkert.
Less til CSS Konverter
Omdan din Less-kode til CSS. Hurtigt, nemt og sikkert.
Illuminance Converter
Konverter belysningsstyrke mellem forskellige enheder med præcision
JSON til Base64-konverter
Kod dine JSON-data i Base64-format sikkert og effektivt
CSS3 Transition Generator
Jævn opacitetsovergang