Písať syntax gradientu ručne je zdĺhavé: uhol, poradie zastávok a percentuálne pozície sa navzájom ovplyvňujú a jediný preklep ticho pokazí celú deklaráciu background. Tento generátor drží náhľad a kód presne synchronizované - to, čo vidíte, je do posledného bajtu ten istý CSS kód, ktorý si skopírujete. Všetko beží na strane klienta, takže nič z toho, čo navrhnete, sa nikam neposiela.
Bezplatný CSS Gradient Generator
Beží celý vo vašom prehliadači - bez nahrávania, bez registrácie.
Typ
Farebné zastávky
CSS kód
Čo je CSS gradient generator?
CSS gradient generator je vizuálny nástroj, ktorý za vás vygeneruje kód pre linear-gradient(), radial-gradient() alebo conic-gradient(). Vyberte farby, potiahnutím posuňte zastávky, nastavte uhol a skopírujte hotový CSS kód, zatiaľ čo živý náhľad presne ukazuje, čo prehliadač vykreslí. Všetko prebieha priamo vo vašom prehliadači.
Ako na to
- 1Vyberte typ prechodu. Zvoľte lineárny, radiálny alebo kónický. Lineárny zobrazí posuvník uhla; radiálny pridá tvar (kruh alebo elipsa) a pozíciu; kónický má počiatočný uhol a pozíciu.
- 2Nastavte farebné zastávky. Kliknutím na každú farebnú vzorku vyberte farbu a potiahnutím posuvníka presuňte zastávku po prechode. Pridajte až 8 zastávok alebo ich odstráňte až na 2.
- 3Upravte smer. Potiahnite posuvník uhla (0 až 360 stupňov) alebo zvoľte kľúčové slovo pozície. Náhľad sa aktualizuje živo pri každej zmene.
- 4Skopírujte CSS kód. Kliknite na Kopírovať a získajte deklaráciu background vrátane jednofarebného záložného riadku, potom ju vložte do svojho štýlopisu.
Pre koho je nástroj určený
- Front-end vývojári, ktorí potrebujú pozadie pre hero sekciu, kartu alebo tlačidlo a chcú presný riadok
linear-gradient()bez učenia sa syntaxe naspamäť. - Web a UI dizajnéri, ktorí prenášajú farebnosť z mockupu: znovu vytvoria prechod vizuálne a hotový CSS kód odovzdajú priamo vývojárskemu tímu.
- Tvorcovia e-mailov a landing pages, ktorí potrebujú jednofarebný záložný riadok, aby dizajn dôstojne fungoval aj v starých klientoch - výstup ho pridáva automaticky.
- Študenti, ktorí sa učia CSS a chcú v reálnom čase vidieť, ako uhol, farebné zastávky a typ prechodu menia výsledok.
Časté otázky
Je tento CSS gradient generator zadarmo?
Áno - úplne zadarmo, bez registrácie, bez vodoznakov, bez limitov. Vytvorte si toľko prechodov, koľko chcete, a skopírujte CSS kód priamo do svojho projektu.
Odosiela sa niečo na server?
Nie. Prechod sa vytvára aj zobrazuje v náhľade úplne vo vašom prehliadači pomocou obyčajného JavaScriptu. Žiadne farby, kód ani údaje o používaní sa nikam neposielajú.
Aký je rozdiel medzi lineárnym, radiálnym a kónickým prechodom?
Lineárny prechod mieša farby pozdĺž priamej línie pod uhlom, ktorý si zvolíte. Radiálny prechod sa šíri smerom von zo stredového bodu ako kruh alebo elipsa. Kónický prechod otáča farby okolo stredového bodu, podobne ako farebné koleso alebo koláčový graf.
Ako fungujú farebné zastávky v CSS prechodoch?
Každá zastávka spája farbu s pozíciou od 0 % do 100 % pozdĺž línie prechodu. Prehliadač plynulo prelína susedné zastávky. Umiestnenie dvoch zastávok na rovnakú pozíciu vytvorí ostrú hranu namiesto prelínania - hodí sa na pruhy alebo efekty koláčového grafu.
Ktoré prehliadače podporujú tieto prechody?
Všetky moderné prehliadače - Chrome, Firefox, Safari a Edge - podporujú linear-gradient() a radial-gradient() bez prefixu; conic-gradient() je podporovaný všade od roku 2020. Skopírovaný kód obsahuje aj jednofarebný fallback pre staršie prehliadače.
Môžem použiť vygenerovaný prechod ako farbu textu?
Nie priamo - prechody sú obrázky, nie farby. Aplikujte prechod ako background-image na textový prvok, potom pridajte background-clip: text a color: transparent, aby prechod presvital cez písmená.
Prečo sa na mojom prechode zobrazuje pruhovanie?
Pruhovanie sa objaví, keď sa dve vzdialené zastávky prelínajú cez dlhý úsek podobných odtieňov, čím sa odhalia 8-bitové farebné kroky. Obmedzíte ho pridaním strednej farebnej zastávky, skrátením prelínacej vzdialenosti alebo výberom farieb, ktoré sa líšia aj svetlosťou, nielen odtieňom.