Gradienta sintaksi rakstīt ar roku ir sarežģīti: leņķis, pieturpunktu secība un procentuālās pozīcijas ietekmē cita citu, un pat neliela drukas kļūda klusi sabojā visu background. Šis ģenerators priekšskatījumu un kodu tur pilnīgā sinhronizācijā - tas, ko redzat, ir tieši tas pats CSS, ko kopējat. Viss darbojas tikai pārlūkprogrammā, tāpēc jūsu izveidotais dizains nekur netiek augšupielādēts.
Bezmaksas CSS Gradient Generator
Darbojas tikai tavā pārlūkā - bez augšupielādes un reģistrācijas.
Veids
Krāsu pieturpunkti
CSS kods
Kas ir CSS gradient generator?
CSS gradient generator ir vizuāls rīks, kas jūsu vietā izveido linear-gradient(), radial-gradient() vai conic-gradient() kodu. Izvēlaties krāsas, velkat pieturpunktus vēlamajā vietā, iestatāt leņķi, un priekšskatījums tiešraidē uzreiz parāda, ko pārlūkprogramma tiešām attēlos, tāpēc atliek tikai nokopēt gatavu CSS kodu. Viss notiek jūsu pārlūkprogrammā.
Kā lietot
- 1Izvēlieties gradienta veidu. Izvēlieties linear, radial vai conic. Linear rāda leņķa slīdni, radial pievieno formu (aplis vai elipse) un pozīciju, conic ir sākuma leņķis un pozīcija.
- 2Iestatiet krāsu pieturpunktus. Noklikšķiniet uz katra parauga, lai izvēlētos krāsu, un velciet tā slīdni, lai pārvietotu pieturpunktu gradienta līnijā. Var pievienot līdz 8 pieturpunktiem vai atstāt tikai 2.
- 3Pielāgojiet virzienu. Velciet leņķa slīdni (0-360 grādi) vai izvēlieties pozīcijas atslēgvārdu. Priekšskatījums atjaunojas tiešraidē pēc katras izmaiņas.
- 4Kopējiet CSS kodu. Nospiediet Kopēt, lai iegūtu background deklarāciju kopā ar vienkrāsainu rezerves rindiņu, un ielīmējiet to savā stilu failā.
Kam noder
- Front-end izstrādātājiem, kuriem vajadzīgs hero, kartītes vai pogas fons un kuri grib precīzu
linear-gradient()rindiņu, neiegaumējot sintaksi. - Web un UI dizaineriem, kas atkārto maketu: gradientu izveido vizuāli, tad ģenerēto CSS kodu nodod tieši izstrādes komandai.
- E-pastu un galvenās lapas veidotājiem, kuriem vajadzīga vienkrāsaina rezerves rindiņa, lai dizains veci klientos izskatītos pieklājīgi - tā tiek pievienota automātiski.
- Studentiem, kas mācās CSS, un vēlas reāllaikā redzēt, kā leņķis, krāsu pieturpunkti un gradienta veids maina attēloto rezultātu.
Biežāk uzdotie jautājumi
Vai šis CSS gradient generator ir bezmaksas?
Jā - pilnīgi bezmaksas, bez reģistrācijas, bez ūdenszīmēm un bez ierobežojumiem. Veidojiet tik daudz gradientu, cik vēlaties, un CSS kodu kopējiet tieši savā projektā.
Vai kaut kas tiek augšupielādēts serverī?
Nē. Gradients tiek izveidots un priekšskatīts pilnībā jūsu pārlūkprogrammā ar parastu JavaScript kodu. Nekādas krāsas, kods vai lietošanas dati nekur netiek sūtīti.
Kāda ir atšķirība starp linear, radial un conic gradientiem?
Linear gradients sajauc krāsas taisnā līnijā jūsu izvēlētā leņķī. Radial gradients izplatās no centra punkta apļa vai elipses formā. Conic gradients izkārto krāsas ap centra punktu, līdzīgi kā krāsu ritenis vai riņķa diagramma.
Kā CSS gradientos darbojas krāsu pieturpunkti?
Katrs pieturpunkts sasaista krāsu ar pozīciju no 0% līdz 100% gradienta līnijā. Pārlūkprogramma starp blakus esošajiem pieturpunktiem krāsas sajauc gludi. Novietojot divus pieturpunktus vienā pozīcijā, pārejas vietā rodas asa robeža - noderīgi svītrām un riņķa diagrammas efektiem.
Kuras pārlūkprogrammas atbalsta šos gradientus?
Visas mūsdienu pārlūkprogrammas - Chrome, Firefox, Safari un Edge - atbalsta linear-gradient() un radial-gradient() bez prefiksiem, savukārt conic-gradient() tiek atbalstīts visur kopš 2020. gada. Nokopētajā kodā ir arī vienkrāsaina rezerves versija vecākiem gadījumiem.
Vai izveidoto gradientu var izmantot kā teksta krāsu?
Ne tieši - gradienti ir attēli, nevis krāsas. Piemērojiet gradientu kā background-image teksta elementam, tad pievienojiet background-clip: text un color: transparent, lai gradients būtu redzams caur burtiem.
Kāpēc manā gradientā redzamas joslas?
Joslas parādās, kad divi tālu esoši pieturpunkti saplūst garā līdzīgu toņu posmā, atklājot 8 bitu krāsu soļus. Samaziniet tās, pievienojot starpposma krāsu pieturpunktu, saīsinot pārejas attālumu vai izvēloties krāsas, kas atšķiras ne tikai tonī, bet arī gaišumā.