Ülemineku süntaksi käsitsi kirjutamine on tülikas: nurk, peatuste järjekord ja protsentuaalsed asukohad mõjutavad üksteist ning üks väike trükiviga rikub vaikselt kogu background-i. See generaator hoiab eelvaate ja koodi täpselt sünkroonis - see, mida näed, on baidi täpsusega sama CSS, mida kopeerid. Kõik töötab ainult brauseris, seega ei laadita midagi, mida kujundad, kuhugi üles.
Tasuta CSS Gradient Generator
Töötab täielikult sinu brauseris - midagi ei laadita üles, kontot pole vaja.
Tüüp
Värvipeatused
CSS-kood
Mis on CSS gradient generator?
CSS gradient generator on visuaalne tööriist, mis koostab sinu eest linear-gradient(), radial-gradient() või conic-gradient() koodi. Vali värvid, lohista peatused soovitud kohta, määra nurk - otseeelvaade näitab kohe täpselt seda, mida brauser päriselt kuvab, ning valmis CSS-koodi jääb vaid kopeerida. Kõik toimub sinu brauseris.
Kuidas kasutada
- 1Vali ülemineku tüüp. Vali linear, radial või conic. Linear kuvab nurgaliuguri, radial lisab kuju (ring või ellips) ja asukoha, conic-il on algnurk ja asukoht.
- 2Määra värvipeatused. Klõpsa iga näidist, et valida värv, ja lohista selle liugurit, et liigutada peatust mööda ülemineku joont. Lisada saab kuni 8 peatust või jätta järele vähemalt 2.
- 3Kohanda suunda. Lohista nurgaliugurit (0-360 kraadi) või vali asukoha märksõna. Eelvaade uueneb otse iga muudatusega.
- 4Kopeeri CSS-kood. Vajuta Kopeeri, et saada background-deklaratsioon koos ühevärvilise varuvariandiga, ja kleebi see oma stiilifaili.
Kellele see sobib
- Front-end arendajad, kes vajavad hero, kaardi või nupu tausta ja tahavad täpset
linear-gradient()rida ilma süntaksit pähe õppimata. - Veebi- ja UI-disainerid, kes jäljendavad makette: loovad ülemineku visuaalselt ja annavad genereeritud CSS-koodi otse arendusmeeskonnale.
- E-kirjade ja sihtlehtede loojad, kellel on vaja ühevärvilist varuvarianti, et kujundus vanemates programmides ilusti taanduks - see lisatakse automaatselt.
- CSS-i õppivad tudengid, kes tahavad reaalajas näha, kuidas nurk, värvipeatused ja ülemineku tüüp lõpptulemust muudavad.
Korduvad küsimused
Kas see CSS gradient generator on tasuta?
Jah - 100% tasuta, registreerimist pole vaja, vesimärke ega piiranguid pole. Loo nii palju üleminekuid, kui soovid, ja kopeeri CSS-kood otse oma projekti.
Kas midagi saadetakse serverisse?
Ei. Üleminek luuakse ja kuvatakse eelvaates täielikult sinu brauseris tavalise JavaScriptiga. Ühtegi värvi, koodi ega kasutusandmeid kuhugi ei saadeta.
Mis vahe on linear, radial ja conic üleminekutel?
Linear-üleminek segab värvid kokku sirgjoonel, mille nurga sa valid. Radial-üleminek levib väljapoole keskpunktist ringi või ellipsi kujul. Conic-üleminek paigutab värvid keskpunkti ümber, meenutades värviratast või sektordiagrammi.
Kuidas värvipeatused CSS üleminekutes töötavad?
Iga peatus seob värvi asukohaga vahemikus 0% kuni 100% mööda ülemineku joont. Brauser segab naaberpeatuste vahel värvid sujuvalt kokku. Kui asetada kaks peatust samasse asukohta, tekib sujuva ülemineku asemel terav serv - see on kasulik triipude ja sektordiagrammi efektide jaoks.
Millised brauserid neid üleminekuid toetavad?
Kõik tänapäevased brauserid - Chrome, Firefox, Safari ja Edge - toetavad prefiksita linear-gradient() ja radial-gradient() funktsioone, conic-gradient() on toetatud kõikjal alates 2020. aastast. Kopeeritud kood sisaldab ka ühevärvilist varuvarianti vanemate juhtude jaoks.
Kas loodud üleminekut saab kasutada teksti värvina?
Mitte otse - üleminekud on pildid, mitte värvid. Rakenda üleminek background-image'ina tekstielemendile, seejärel lisa background-clip: text ja color: transparent, et üleminek paistaks läbi tähtede.
Miks minu üleminekus on näha triipe?
Triibud tekivad, kui kaks kauget peatust segunevad pika sarnaste toonide lõigu ulatuses, paljastades 8-bitised värviastmed. Vähenda seda, lisades vahepealse värvipeatuse, lühendades segunemisvahemaad või valides värve, mis erinevad lisaks toonile ka heleduselt.