Gradiento sintaksę rašyti ranka nėra paprasta: kampas, taškų tvarka ir procentinės pozicijos veikia vienas kitą, o menkiausia klaida tyliai sugadina visą background. Šis generatorius peržiūrą ir kodą laiko visiškai sinchronizuotus - tai, ką matote, yra tiksliai tas pats CSS, kurį kopijuojate. Viskas vyksta naršyklėje, todėl jūsų kuriamas dizainas niekur neišsiunčiamas.
Nemokamas CSS Gradient Generator
Veikia tik jūsų naršyklėje - nieko neįkeliama, registracija nereikalinga.
Tipas
Spalvų taškai
CSS kodas
Kas yra CSS gradient generator?
CSS gradient generator - tai vizualus įrankis, kuris už jus sukuria linear-gradient(), radial-gradient() arba conic-gradient() kodą. Pasirenkate spalvas, tempiate taškus į norimą vietą, nustatote kampą, o gyva peržiūra iškart parodo, ką naršyklė realiai atvaizduos - liks tik nukopijuoti paruoštą CSS kodą. Viskas vyksta jūsų naršyklėje.
Kaip naudotis
- 1Pasirinkite gradiento tipą. Rinkitės linear, radial arba conic. Linear rodo kampo šliaužiklį, radial prideda formą (apskritimas ar elipsė) ir poziciją, conic turi pradinį kampą ir poziciją.
- 2Nustatykite spalvų taškus. Spustelėkite kiekvieną pavyzdį, kad pasirinktumėte spalvą, ir tempkite jo šliaužiklį, kad perkeltumėte tašką gradiento linijoje. Galite pridėti iki 8 taškų arba palikti tik 2.
- 3Pakoreguokite kryptį. Tempkite kampo šliaužiklį (0-360 laipsnių) arba pasirinkite pozicijos raktažodį. Peržiūra atsinaujina gyvai su kiekvienu pakeitimu.
- 4Nukopijuokite CSS kodą. Paspauskite Kopijuoti, kad gautumėte background deklaraciją kartu su vienspalviu atsarginiu variantu, ir įklijuokite ją į savo stilių failą.
Kam pravers
- Front-end kūrėjams, kuriems reikia hero, kortelės ar mygtuko fono ir kurie nori tikslios
linear-gradient()eilutės, neįsimenant sintaksės. - Web ir UI dizaineriams, atkuriantiems maketą: vizualiai sukuriate gradientą, tada sugeneruotą CSS kodą tiesiog perduodate kūrėjų komandai.
- El. laiškų ir nukreipimo puslapių kūrėjams, kuriems reikia vienspalvio atsarginio varianto, kad dizainas gražiai suveiktų senesnėse programose - jis pridedamas automatiškai.
- CSS besimokantiems studentams, kurie nori realiu laiku matyti, kaip kampas, spalvų taškai ir gradiento tipas keičia galutinį vaizdą.
DUK
Ar šis CSS gradient generator nemokamas?
Taip - 100% nemokamas, registruotis nereikia, jokių vandenženklių ir apribojimų. Kurkite tiek gradientų, kiek norite, ir CSS kodą kopijuokite tiesiai į savo projektą.
Ar kas nors siunčiama į serverį?
Ne. Gradientas sukuriamas ir peržiūrimas tik jūsų naršyklėje su paprastu JavaScript kodu. Jokios spalvos, kodas ar naudojimo duomenys niekur nesiunčiami.
Kuo skiriasi linear, radial ir conic gradientai?
Linear gradientas jungia spalvas tiesia linija pasirinktu kampu. Radial gradientas sklinda nuo centrinio taško apskritimo ar elipsės forma. Conic gradientas spalvas paskirsto aplink centrinį tašką, panašiai kaip spalvų ratas ar skritulinė diagrama.
Kaip veikia spalvų taškai CSS gradientuose?
Kiekvienas taškas sujungia spalvą su pozicija nuo 0% iki 100% gradiento linijoje. Naršyklė tarp gretimų taškų spalvas sklandžiai sumaišo. Padėjus du taškus toje pačioje pozicijoje, vietoj perėjimo susidaro griežta riba - tai naudinga juostelėms ir skritulinės diagramos efektams.
Kurios naršyklės palaiko šiuos gradientus?
Visos šiuolaikinės naršyklės - Chrome, Firefox, Safari ir Edge - palaiko linear-gradient() ir radial-gradient() be priešdėlių, o conic-gradient() palaikomas visur nuo 2020 metų. Nukopijuotame kode taip pat yra vienspalvis atsarginis variantas senesniems atvejams.
Ar galiu sukurtą gradientą naudoti kaip teksto spalvą?
Ne tiesiogiai - gradientai yra vaizdai, o ne spalvos. Pritaikykite gradientą kaip background-image teksto elementui, tada pridėkite background-clip: text ir color: transparent, kad gradientas prasišviestų per raides.
Kodėl mano gradiente matosi juostos?
Juostos atsiranda, kai du tolimi taškai susilieja per ilgą panašių atspalvių ruožą, atskleisdami 8 bitų spalvų žingsnius. Sumažinkite jas pridėdami tarpinį spalvos tašką, sutrumpindami perėjimo atstumą arba pasirinkdami spalvas, kurios skiriasi ne tik atspalviu, bet ir šviesumu.