Gradientų generatorius

Kurkite tiesinius, radialinius ar kūginius gradientus, pridėkite spalvų taškus, nustatykite kryptį ir nukopijuokite CSS vienu spustelėjimu.

Gradiento tipas
Spalvų taškai
CSS
Reguliuokite taškus ir kryptį, kad suformuotumėte gradientą.

Kiekvienas gradientas atvaizduojamas tiesiog jūsų naršyklėje. Jokie jūsų nustatymai nėra siunčiami į „BroBroGo“.

DUK

Kuo skiriasi tiesiniai, radialiniai ir kūginiai gradientai?

Tiesinis (linear) gradientas lieja spalvas tiesia linija, kurią nukreipiate kampu. Radialinis gradientas skleidžia jas į išorę nuo centro apskritimu arba elipse. Kūginis (conic) gradientas suka jas aplink centrą tarsi spalvų ratas.

Kas yra spalvų taškai (color stops)?

Kiekvienas spalvos taškas (color stop) yra spalva, priskirta tam tikrai pozicijai išilgai gradiento: 0% pradžioje, 100% pabaigoje. Judinkite tašką, kad pakeistumėte vietą, kurioje spalva pasiekia viršūnę, arba pridėkite daugiau taškų sodresniam perėjimui. Galite naudoti iki aštuonių taškų.

Kaip valdyti kryptį?

Tiesiniam (linear) arba kūginiam (conic) gradientui kampo šliaužiklis nustato kryptį: 0° nukreipta į viršų, 90° – į dešinę. Radialinis gradientas neturi kampo; vietoj to pasirinkite apskritimo arba elipsės formą, kad pakeistumėte jo sklaidą.

CSS Cubic Bezier generatoriusVilkite dvi rankenėles, kad suformuotumėte animacijos kreivę, stebėkite judantį tašką ir nukopijuokite cubic-bezier() reikšmę.Elementų šešėlių (box-shadow) generatoriusVilkite šliaužiklius, kad suformuotumėte šešėlį, sluoksniuokite juos gyliui išgauti ir akimirksniu nukopijuokite paruoštą CSS.Kampų apvalinimo (border-radius) generatoriusApvalinkite kiekvieną kampą šliaužikliais, kurkite organines formas elipsiniu režimu ir akimirksniu nukopijuokite CSS.Flexbox generatoriusKonfigūruokite flex konteinerį ir jo elementus vizualiais valdikliais, stebėkite išdėstymą gyvai ir nukopijuokite CSS vienu spustelėjimu.CSS Grid generatoriusNustatykite stulpelius ir eilutes, vilkite per langelius elementams išdėstyti ir vienu spustelėjimu nukopijuokite tinklelio CSS bei atitinkamą HTML.CSS clamp() skaičiuoklėĮveskite dydį mažiems ir dideliems ekranams ir gaukite kintančią clamp() reikšmę, kuri sklandžiai prisitaiko – šriftams, paraštėms ar tarpams.Spalvų konverterisKonvertuokite spalvas tarp HEX, RGB, HSL, HSV, CMYK ir LAB – redaguokite bet kurį lauką, o kiti atsinaujins automatiškai.CSS tvarkytuvas ir glaudintuvasSutvarkykite netvarkingą CSS patogiam skaitymui arba suglaudinkite jį gamybiniam naudojimui – su saugiuoju režimu, kuris niekada nekeičia taisyklių tvarkos.Kontrasto tikrintuvasĮveskite teksto ir fono spalvas, kad sužinotumėte WCAG kontrasto santykį bei atitinkamus AA ir AAA lygius.