CSS gradiento generatorius

Kaip naudotis CSS gradiento generatoriumi

1. Pasirink Gradiento tipas: Tiesinis, Radialinis arba Kūginis. Didelė peržiūra viršuje atsinaujina po kiekvieno pakeitimo.
2. Tiesiniam gradientui nustatyk Kampas slankikliu arba įrašyk jį laipsniais (90° eina iš kairės į dešinę, 180° iš viršaus į apačią). Kūginiam gradientui kampas yra vieta, kur prasideda sukimasis.
3. Radialiniams ir kūginiams gradientams perkelk centrą per Centras X ir Centras Y. Radialinis gradientas gali būti Apskritimas arba Elipsė (meniu Forma).
4. Redaguok Spalvų taškai. Spustelėk bet kurioje juostos vietoje, kad ten pridėtum tašką su spalva, kurią gradientas jau turi tame taške, arba naudok Pridėti tašką, kad užpildytum didžiausią tarpą. Tempk rankenėlę, kad ją perkeltum. Kiekvienas taškas taip pat turi eilutę, kurioje gali pasirinkti jo spalvą, įrašyti bet kurią CSS spalvą, nustatyti jo Padėtis (%) arba Pašalinti jį (gradientas išlaiko bent du taškus).
5. Jei nori, pažymėk Kartojamas, pasirink Spalvų interpoliacija, spustelėk Apversti, kad apverstum taškus, arba Atsitiktinis gradientas įkvėpimui.
6. Mygtuku Kopijuoti nukopijuok rezultatą iš CSS kodas.

Klaviatūra: pasirink rankenėlę juostoje, tada rodyklių klavišais perkelk ją po 1 % (10 % su Shift), Home ir End nušok į galus, o Delete ją pašalink.

Veikia tavo naršyklėje. Nieko, ką įvedi, nesiunčiame į serverį.

Trys gradiento funkcijos

• linear-gradient() maišo spalvas išilgai tiesios linijos. linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) eina nuo indigo kairėje iki rožinės dešinėje. Kampai skaičiuojami pagal laikrodžio rodyklę nuo viršaus: 0deg rodo aukštyn, 90deg į dešinę.
• radial-gradient() sklinda iš centro taško. radial-gradient(circle at 30% 40%, …) centrą deda 30 % nuo kairės ir 40 % nuo viršaus. Elipsė tempiasi kartu su bloku, apskritimas lieka apvalus.
• conic-gradient() sukasi aplink centrą kaip laikrodžio rodyklės. conic-gradient(from 0deg at 50% 50%, …) kuria spalvų ratus, skritulines diagramas ir sukimosi efektus. Taškų padėtys yra viso apsisukimo dalys.

Parinktis Kartojamas naudoja repeating-linear-gradient() ir jos giminaites: tavo taškų apibrėžtas raštas kartojasi, kol užpildomas blokas. Paskutinį tašką nustatyk gerokai žemiau 100 % (pavyzdžiui, 20 %), kad pamatytum juostas ar žiedus.

Du taškai toje pačioje padėtyje sukuria aštrų kraštą vietoje perėjimo – taip gaminamos juostos ir vėliavos. Generatorius kode taškus laiko surikiuotus pagal padėtį, kaip reikalauja CSS.

sRGB ar OKLCH interpoliacija

Pagal numatytuosius nustatymus naršyklės gradiento spalvas maišo sRGB erdvėje. Tarp dviejų sodrių spalvų, pvz., mėlynos ir geltonos, vidurys dažnai tampa nuobodžiai pilkas ar purvinas. CSS Color Level 4 leidžia pasirinkti interpoliacijos erdvę: linear-gradient(90deg in oklch, …) maišo suvokimu pagrįstoje OKLCH erdvėje ir išlaiko vidurį ryškų.

Su OKLCH (glotnesnė, su sRGB atsarginiu variantu) įrankis parašo dvi background deklaracijas: pirmiausia klasikinę sRGB versiją, tada OKLCH. Naršyklės, palaikančios interpoliacijos erdves („Chrome“ ir „Edge“ 111+, „Safari“ 16.2+, „Firefox“ 127+), naudoja antrą eilutę; senesnės jos nepaiso ir išlaiko pirmąją.

Patarimai

• Taškų laukeliuose priimamos spalvos su skaidrumu, pavyzdžiui, #00000080 arba rgb(0 0 0 / 50%), o tai patogu uždangoms ant paveikslėlių.
• Kodas rašomas su background. Naudok background-image, jei kitas fono savybes nustatai atskirai.
• Subtilūs gradientai (du artimi vienos spalvos atspalviai) paprastai atrodo profesionaliau nei vaivorykštės perėjimai.