CodeKitHubKas yra šis įrankis?
CSS gradientai yra naršyklės sugeneruoti vaizdai iš spalvų sąrašo, o ne jūsų įkelti failai — linear-gradient() perkeičia spalvas palei tiesę nurodytu kampu, o radial-gradient() perkeičia spalvas išorėn nuo centro taško. Abu priima du ar daugiau spalvų taškų, kiekvienas pasirenkamai pritvirtintas prie pozicijos gradiente.
Rašant ranka, gradientuose lengva subtiliai suklysti: taškų tvarka, trūkstami procentai, ar kampo reikšmė netinkama kryptimi (CSS kampai eina pagal laikrodžio rodyklę nuo „to top", kitaip nei matematiniai kampai). Šis įrankis pašalina sintaksę iš kelio — nustatykite spalvas ir pozicijas parinkikliais ir slankikliais, stebėkite, kaip peržiūros langelis atsinaujina realiu laiku, ir kopijuokite gautą CSS, kai jis atrodo tinkamai.
Šaltinis: CSS Images Module Level 3, W3C — specifikacija, apibrėžianti linear-gradient() ir radial-gradient() sintaksę.
Kodėl jį naudoti?
- Gyva peržiūra akimirksniu atsinaujina keičiant bet kurią spalvą, poziciją ar kampą — nereikia perkrauti puslapio, kad pamatytumėte rezultatą.
- Perjunkite tarp linijinių ir spindulinių gradientų vienu paspaudimu; kampo valdiklis automatiškai pasislepia spindulinio gradiento atveju, kai jis netaikomas.
- Pridėkite ar pašalinkite spalvų taškus (nuo 2 iki 4), o ne apsiribokite fiksuotu dviejų spalvų gradientu.
- Kiekvienas taškas turi savo pozicijos slankiklį, tad taškai neprivalo būti tolygiai išdėstyti.
- Sugeneruoja paruoštą įklijuoti CSS kodą, naudojantį standartinę linear-gradient()/radial-gradient() sintaksę.
- Viskas vyksta jūsų naršyklėje — niekas iš to, ką konfigūruojate, niekur nesiunčiama. Nemokama, be registracijos, veikia mobiliuosiuose.
Kaip naudoti
- Pasirinkite Linijinį ar Spindulinį kaip gradiento tipą.
- Linijiniam gradientui vilkite kampo slankiklį — 90deg eina iš kairės į dešinę, 180deg — iš viršaus žemyn, ir t. t.
- Nustatykite kiekvieno taško spalvą ir poziciją; pirmasis taškas yra gradiento pradinė spalva, paskutinis — pabaigos spalva.
- Spustelėkite „+ Pridėti tašką", kad pridėtumėte iki 4 taškų daugiaspalviam gradientui, arba ✕ mygtuką, kad pašalintumėte (minimum 2).
- Nukopijuokite sugeneruotą CSS ir įklijuokite jį į background ar background-image deklaraciją.
Pavyzdys
Įvestis
Linijinis · Kampas: 90deg · Taškai: #f97316 ties 0%, #ec4899 ties 100%Išvestis
background: linear-gradient(90deg, #f97316 0%, #ec4899 100%);Iš kairės į dešinę einantis oranžinis-į-rožinį gradientas — dažnas stilius mygtukams, reklaminėms juostoms ir pagrindinio ekrano fonams.
Linijiniai ir spinduliniai gradientai
Linijinis gradientas perkeičia spalvą palei tiesę, valdomą kampo — naudingas reklaminėms juostoms, mygtukams ir kryptiniams fonams. Spindulinis gradientas perkeičia spalvą išorėn nuo centro taško plečiančiaisiais žiedais, kas tinka prožektoriaus efektams, ženkliukams ar švytėjimo stiliaus fonams. Šis įrankis numatytai naudoja apskritimo formą, centruotą dėžutėje, kas apima dažniausią spindulinio naudojimo atvejį; CSS taip pat palaiko elipsės formas ir necentruotas pozicijas, jei reikia toliau redaguoti rezultatą ranka.
Dažni gradientų šablonai
- Subtilus prekės ženklo akcentas: du artimi atspalviai (pvz., du tos pačios spalvos tonai) nedideliu kampu švelniam fono padengimui.
- Aukšto kontrasto CTA mygtukas: dvi sodrios, viena kitą papildančios spalvos 90deg ar 135deg kampu ryškiam, spustelėjimą kviečiančiam vaizdui.
- Perdanga ant nuotraukos: gradientas nuo permatomo iki vientisos spalvos (nustatykite skaidrumą per rgba spalvą parinkiklio pagrindinėje šešioliktainėje reikšmėje ar sukoreguokite po kopijavimo), uždėtas ant background-image.
- Daugiataškis vaivorykštės/prekės ženklo gradientas: 3–4 taškai, išdėstyti per visą 0–100% intervalą, sklandesniam, laipsniškesniam perėjimui nei leidžia dviejų spalvų gradientas.
- Spindulinis prožektorius: ryškus centro taškas arti 0%, blėstantis iki tamsesnio krašto taško arti 100%, naudingas pagrindiniams ekranams ar kortelių akcentams.
Derinimas su kitais CSS įrankiais
Gradientai dažnai derinami su suapvalintais kampais ir šešėliais tame pačiame elemente — gradiento kortelė su švelniu box-shadow ir suapvalintais kampais yra dažnas sąsajos šablonas. Sugeneruokite kiekvieną dalį atskirai ir sujunkite CSS deklaracijas tame pačiame elemente.
→ box-shadow generatorius · border-radius generatorius · Spalvų parinkiklis
Dažniausiai užduodami klausimai
Koks skirtumas tarp linear-gradient() ir radial-gradient()?
linear-gradient() perkeičia spalvas palei tiesę nurodytu kampu. radial-gradient() perkeičia spalvas išorėn nuo centro taško plečiančiomis formomis (apskritimu ar elipse). Abu priima tą patį kableliais atskirtą spalvų taškų sąrašą; skiriasi tik perėjimo forma.
Kaip veikia CSS gradiento kampai?
CSS gradiento kampai eina pagal laikrodžio rodyklę, pradedant nuo „to top" (0deg nukreiptas aukštyn). 90deg nukreiptas į dešinę, 180deg — žemyn, o 270deg — į kairę — priešinga konvencija nei standartiniai matematiniai kampai, kas yra dažna painiavos priežastis rašant gradientus ranka.
Ar galiu naudoti daugiau nei 4 spalvų taškus?
Taip — CSS gradientai priima bet kokį kableliais atskirtų spalvų taškų skaičių. Šis įrankis apriboja interaktyvų konstruktorių iki 4, kad sąsaja liktų valdoma, bet galite nukopijuoti sugeneruotą CSS ir rankiniu būdu pridėti daugiau kableliais atskirtų „spalva pozicija%" įrašų savo stilių lape.
Kodėl mano gradientas atrodo dryžuotas, o ne sklandus?
Dryžuotumas dažniausiai atsiranda dėl spalvų, per daug nutolusių atspalviu su per mažai taškų tarp jų, arba dėl naršyklės pačios ribotos spalvų tikslumo esant labai mažam kontrastui. Pridėjus tarpinį tašką su sumaišyta spalva ar renkantis artimesnio atspalvio spalvas, paprastai gaunamas sklandesnis rezultatas.
Ar galiu animuoti CSS gradientą?
Ne tiesiogiai — gradientai natūraliai neanimuojami taip, kaip background-position ar transform, nes naršyklės negali interpoliuoti tarp dviejų savavališkų gradiento apibrėžimų. Įprasti sprendimai apima background-position animavimą per padidintą gradientą, ar background-color perėjimą, jei keičiasi tik viena spalva.