Bästa fria CSS- gradientgenerator
Bygg linjära och radiella CSS-gradienter med en live-förhandsgranskning - kopiera bakgrundskoden.
100% fri
Ingen registrering
Inget vattenmärke
✨
Go Pro för de bästa AI-modellerna - bild, video och chatt - plus större uppladdningar, prioritet i kön och ingen väntan.
Uppgradera till Pro
Kärlek Best.Free? Dela den
Hur det fungerar
- Välj en typ. Välj linjär eller radiell, och ställ in vinkeln för en linjär lutning.
- Välj färger och stopp. Ställ in två eller flera färger och deras positioner; lägg till ett tredje stopp i Avancerade alternativ.
- Kopiera CSS. Tryck på Kopiera CSS och klistra in bakgrundsgradienten i ditt stilmall.
Om detta verktyg
Bygg en CSS-gradient med öga istället för att redigera värden blinda. Byt mellan linjär och radiell, dra vinkeln för en linjär gradient, och välj färger och positioner för minst två stopp medan en fullbredd förhandsvisning bar uppdateringar live. Kopiera den resulterande bakgrund egenskap rakt in i din stilmall. De avancerade alternativen lägga till en tredje färg stopp för rikare blandningar och låta dig välja en cirkel eller ellips form för radial gradienter. Allt körs i din webbläsare.
Vad folk använder det till
- Designa en hjälte eller sektionsbakgrundslutning
- Skapa en knapp eller kort lutning fylla
- Blanda två eller tre märkesfärger smidigt
- Skapa en radiell spotlight eller vinjett effekt
Vanliga frågor
En linjär lutning smälter längs en rak linje i den vinkel du väljer; en radiell lutning smälter utåt från en mittpunkt som cirkel eller ellips.
För en linjär lutning ställer vinkeln in riktningen för blandningen - 0° går nedifrån till toppen, 90° åt vänster till höger och så vidare.
Varje stopp är en färg som placeras i procent längs lutningen. Flytta ett stopp ändras där den färgen sitter och hur skarp blandningen är.
Ja. Öppna Avancerade alternativ för att lägga till ett tredje färgstopp, infogat mellan det första och sista för en flerfärgsblandning.
Nej. Färgerna och stoppen är förvandlade till en CSS-sträng lokalt i din webbläsare.
Helt gratis, inget konto och inga gränser - ett klient-side verktyg utan något att mäta.
Ja. Det körs i din webbläsare, så CSS Gradient Generator fungerar på telefoner och surfplattor samt skrivbord - det finns ingen app att installera.
Vanligtvis bara några sekunder för en typisk fil - CSS Gradient Generator börjar fungera i samma ögonblick du ger det din ingång.
Det är obegränsat med användning av engångsartiklar, med ett generöst lock för rättvis användning som håller det snabbt för alla.
Alla moderna webbläsare - Chrome, Safari, Firefox och Edge. CSS Gradient Generator behöver ingenting installerat utanför webbläsaren du redan använder.