CSS gradiento generatorius
Kas yra CSS gradientas?
CSS gradientai leidžia rodyti sklandžius perėjimus tarp dviejų ar daugiau spalvų nenaudojant paveikslėlių failų. Yra trys tipai: linear-gradient (išilgai tiesios linijos), radial-gradient (spinduliuojantis iš centrinio taško) ir conic-gradient (besisukantis aplink centrinį tašką). Gradientai naudojami fonams, mygtukams, persidengiantiems sluoksniams ir dekoratyviems elementams.
Kaip naudoti CSS gradiento generatorių
-
Pasirinkite išankstinį nustatymą iš pavyzdžių arba sukonfigūruokite savo gradientą.
-
Pasirinkite gradiento tipą: linear, radial arba conic.
-
Sureguliuokite kampą (linear/conic) arba formą (radial).
-
Redaguokite spalvų sustojimus — keiskite spalvas ir pozicijas (0–100%).
-
Pridėkite arba pašalinkite spalvų sustojimus pagal poreikį.
-
Nukopijuokite CSS ir įklijuokite į savo stilių lapą.
Dažnai užduodami klausimai
Kaip sukurti skaidrų gradientą? Naudokite rgba() arba hsla() spalvos reikšmes su alfa kanalu 0, jei norite pilnos skaidrumo. Pavyzdžiui, spalvos sustojimas rgba(0,0,0,0) yra visiškai skaidri juoda, naudinga išnykimo perklodai ant vaizdų.
Kaip sukurti tvirtą spalvos sustojimą (be perėjimo)? Padėkite du spalvos sustojimus toje pačioje pozicijoje — vieną pabaigoje ir vieną pradžioje tame taške. Pavyzdžiui, raudona 50%, mėlyna 50% sukuria momentinį perjungimą iš raudonos į mėlyną viduryje be gradiento perėjimo.
Kurie naršyklės palaiko kūginius gradientus? Kūginiai gradientai palaikomi visuose šiuolaikinėse naršyklėse (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Jie nepalaikomi Internet Explorer.
Ar galiu naudoti kelis gradientus tame pačiame elemente? Taip. CSS background priima kableliu atskirtas sluoksnių sąrašą. Galite sukrauti gradientus, juos sujungti su fono vaizdais ir kontroliuoti kiekvieno sluoksnio padėtį bei dydį atskirai.
Keywords: CSS gradiento generatorius, linijinis gradientas, radialinis gradientas, koninis gradientas, CSS fono generatorius, gradiento spalvų parinkiklis, CSS gradiento įrankis