CSS gradiento generatorius
Pasirinkite spalvą ir kampą – sugeneruokite CSS gradiento kodą su peržiūra
Savybės
Peržiūra ir kodas atnaujinami kartu
Keičiant spalvą ar kampą, išvaizda ir CSS keičiasi vienu metu
Linijinis, radialinis ir kūginis gradientas
Detali reguliavimo galimybė kiekvieno tipo kampui, formai ir centro vietai
Iki 10 spalvų – reguliuojamos tempimo būdu
Spalvų padėtis reguliuojama tempiant juostoje, skaidrumas – slankikliu
8 pavyzdinės spalvos ir atsitiktinė generavimo funkcija
Pradėkite nuo žinomos spalvų kombinacijos arba atsitiktinės ir tik siuželi
Kaip naudoti
Pasirinkite tipą
Pasirinkite gradiento tipą: linijinį, radialinį arba kūginį
Nustatykite spalvą
Pasirinkite spalvą iš kodo arba pavyzdžio, naudokite mygtuką „Pridėti spalvą", reguliuokite padėtį ir skaidrumą
Reguliuokite kryptį
Linijinis – nustatykite kampą arba naudokite krypties mygtukus. Radialinis ir kūginis – nustatykite centro vietą
Nukopijuokite kodą
Spustelėkite mygtuką „Kopijuoti" ir vienos eilutės CSS kodą įklijuokite į savo stilius
Naudojimo atvejai
Fono tūpimo vaizdui kurti
Nustatykite svetainės viršaus arba mygtuko foną – nebereikia rašyti kodo
Tinkalapsnio antraščių spalvos pasirinkimas
Pasirinkite panašią spalvą iš pavyzdžio ir sutvarkyti straipsnio antraščės foną
Peršvietimas virš nuotraukos
Sumažinkite skaidrumą ir padarykite pusšviesų sluoksnį virš nuotraukos
Kelių spalvų gradiento reguliavimas
Tempiant reguliuokite trijų ar daugiau spalvų ribų vietą
Pagrindinės žinios
linear, radial ir conic skirtumai
CSS gradientai turi 3 funkcijas su skirtingomis spalvų kaitos formomis – visas jų rašote tiesiai į background savybę.
- linear-gradient：linear-gradient yra linijinis gradientas, kuriame spalva keičiasi tiesia linija žemyn nurodytą kampą
- radial-gradient：radial-gradient yra radialinis gradientas, kuriame spalva plečiasi iš centro į šonus sudarydama apskritimą arba elipsę
- conic-gradient：conic-gradient yra kūginis gradientas, kuriame spalva keičiasi sukdamasi aplink centrą pagal laikrodžio kryptį
Kampo ir krypties raktažodžio atitiktis
linear-gradient kampe 0deg reiškia kryptį iš apačios į viršų; didėjant skaičiui, kampas sukasi pagal laikrodžio rodyklę. Kampą galite užrašyti ir raktažodžiu, pvz. „to right" – 90deg atitinka „to right", o 180deg atitinka „to bottom".
Spalvos sustojimo taškai ir skaidrumo rašyba
Spalvos sustojimo taškas (color stop) yra vieta gradiente, kur spalva yra konkretaus lygio. 0% nurodo pradžią, 100% – pabaigą. Pavyzdžiui, „#3B82F6 0%, #8B5CF6 100%" reiškia spalvą nuo mėlynos pradžioje iki violetinės pabaigoje.
- #RRGGBB formatas：#RRGGBB formatas naudoja šešioliktainę sistemą: raudona, žalia ir mėlyna po 2 skaitmenis. Pavyzdžiui, #FF0000 yra nepermatoma raudona.
- rgba formatas：rgba formatas prideda skaidrumą (0–1) prie raudonos, žalios ir mėlynos verčių (0–255). Pavyzdžiui, skaidrumas 0,5 reiškia 50% permatumą.
Saugumas ir privatumas
Apdorojama naršyklėje
Įvesti duomenys apdorojami tik jūsų naršyklėje ir nesiunčiami į išorę.
Apdorota tik naršyklėje
Gradiento kodo generavimas vykdoma tik jūsų naršyklėje, įvesties duomenys neišsiunčiami serveriui.
Ryšys šifruojamas HTTPS
Puslapio įkėlimas taip pat šifruojamas TLS, trečiosios šalys negali perskaityti turinio.
Nesiųsti trečiosioms šalims
Įvesties turinys neišsiunčiamas išorės paslaugoms, tokioms kaip reklamų tinklai ar sekimo sistemos.
Be automatinio rezultatų išsaugojimo
Pasirinktos spalvos ir nustatymai ir įvesties pasiūlymai nėra saugomi serveryje.
Sekite RAKKOTOOLS Google paieškoje
185 patogiųjų įrankių bus lengviau rasti iš Google paieškos ir dirbtinio intelekto paieškos!
- Randama paieškoje
- Rodoma ir dirbtinio intelekto paieškoje
- Atrask naujus įrankius
Naujinimų informacija
- update #312
Pridėtas CSS gradiento generatorius, kuris generuoja kodą pasirinkus spalvą ir kampą