CSS-i gradiendi generaator

Kuidas CSS-i gradiendi generaatorit kasutada

1. Vali Gradiendi tüüp: Lineaarne, Radiaalne või Koonuseline. Suur eelvaade üleval uueneb iga muudatusega.
2. Lineaarse gradiendi puhul sea Nurk liuguriga või sisesta see kraadides (90° kulgeb vasakult paremale, 180° ülalt alla). Koonuselise gradiendi puhul on nurk koht, kust pööre algab.
3. Radiaalse ja koonuselise gradiendi puhul liiguta keskpunkti väljadega Keskpunkt X ja Keskpunkt Y. Radiaalne gradient võib olla Ring või Ellips (menüü Kuju).
4. Muuda Värvipeatusi. Klõpsa ribal suvalises kohas, et lisada sinna peatus värviga, mis gradiendil selles punktis juba on, või kasuta nuppu Lisa peatus, et täita kõige laiem vahe. Lohista käepidet, et seda liigutada. Igal peatusel on ka rida, kus saad valida selle värvi, sisestada mis tahes CSS-i värvi, määrata selle Asukoha (%) või selle Eemaldada (gradiendil jääb alles vähemalt kaks peatust).
5. Soovi korral märgi Korduv, vali Värvide interpolatsioon, klõpsa nupul Pööra ümber, et peatused ümber pöörata, või nupul Juhuslik gradient inspiratsiooniks.
6. Kopeeri tulemus väljalt CSS-kood nupuga Kopeeri.

Klaviatuur: fookusta ribal käepide ja kasuta nooleklahve, et liigutada seda 1% (Shiftiga 10%) võrra, Home- ja End-klahve, et hüpata otstesse, ning Delete-klahvi selle eemaldamiseks.

Tööriist töötab sinu brauseris. Midagi, mida sisestad, ei saadeta serverisse.

Kolm gradiendifunktsiooni

• linear-gradient() seguneb värve piki sirget. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) kulgeb indigost vasakul roosani paremal. Nurgad loetakse päripäeva ülaservast: 0deg osutab üles, 90deg paremale.
• radial-gradient() kiirgub keskpunktist. radial-gradient(circle at 30% 40%, …) asetab keskpunkti 30% vasakust servast ja 40% ülaservast. Ellips venib koos kastiga, ring jääb ümmarguseks.
• conic-gradient() pühib ümber keskpunkti nagu kella osutid. conic-gradient(from 0deg at 50% 50%, …) loob värviratta, sektordiagrammi ja laadimisringi efekte. Peatuste asukohad on osad täispöördest.
• Valik Korduv kasutab funktsiooni repeating-linear-gradient() ja selle sugulasi: sinu peatustega määratud muster kordub, kuni kast on täidetud. Pane viimane peatus selgelt alla 100% (näiteks 20%), et näha triipe või rõngaid.

Kaks peatust samal asukohal loovad segunemise asemel terava serva, nii tehakse triipe ja lippe. Generaator hoiab peatused koodis asukoha järgi sorteeritud, nagu CSS nõuab.

sRGB või OKLCH interpolatsioon

Vaikimisi segavad brauserid gradiendi värve sRGB-s. Kahe küllastunud värvi, näiteks sinise ja kollase vahel tekitab see sageli tuhmi halli või porise keskosa. CSS Color Level 4 lubab interpolatsiooniruumi valida: linear-gradient(90deg in oklch, …) segab tajupõhises OKLCH-ruumis ja hoiab keskosa erksa.

Valikuga OKLCH (sujuvam, sRGB varuvariandiga) kirjutab tööriist kaks background deklaratsiooni: kõigepealt klassikalise sRGB versiooni, seejärel OKLCH versiooni. Brauserid, mis toetavad interpolatsiooniruume (Chrome ja Edge 111+, Safari 16.2+, Firefox 127+), kasutavad teist rida; vanemad ignoreerivad seda ja jäävad esimese juurde.

Näpunäiteid

• Peatuste väljadel aktsepteeritakse läbipaistvusega värve, näiteks #00000080 või rgb(0 0 0 / 50%), mis on mugav piltide kattekihtide jaoks.
• Kood kirjutatakse omadusega background. Kasuta selle asemel background-image, kui määrad teisi taustaomadusi eraldi.
• Peened gradiendid (kaks lähedast tooni ühest värvist) näevad tavaliselt professionaalsemad välja kui vikerkaarelised segud.