Jenereta ya CSS Gradient

Zana zote

Jenga gradient za CSS za mstari, radial na conic zenye vituo vingi vya rangi na nakili msimbo.

Onyesho la awali
Matokeo ya CSS
background: —;

Kila kitu hufanyika ndani ya kivinjari chako — hakuna kupakia, hakuna kujisajili.

Aina ya gradient
deg
Vituo vya rangi Bofya upau ili kuongeza kituo, buruta ili kusogeza
Kituo kilichochaguliwa
Rangi ya kituo
100%
%
Mipangilio tayari

Kuhusu Jenereta ya CSS Gradient

Kitengenezaji cha CSS Gradient kinajenga gradient za linear, radial na conic kwa udhibiti kamili wa kuona. Ongeza vituo vya rangi kwa kubofya kwenye upau wa gradient, viburute ili kuvibadilisha nafasi, na upe kila kituo rangi yake, uwazi na nafasi. Gradient za linear hupata kidhibiti cha pembe; za radial hupata umbo (mduara au yai) na nafasi; za conic hupata pembe ya kuanzia.

Onyesho la awali huonyesha hasa kile kivinjari kitakachoonyesha, na kitufe cha kuchanganya bila mpangilio pamoja na mifano iliyochaguliwa maalum vipo pale unapohitaji sehemu ya kuanzia badala ya turubai tupu. Vituo vinaweza kuongezwa na kuondolewa kwa uhuru — gradient inahitaji angalau vituo viwili tu.

Ikiwa sahihi, nakili thamani halisi ya gradient au kanuni kamili ya CSS. Kitengenezaji kinafanya kazi kabisa kwenye kivinjari chako bila kupakia na bila kujisajili, kikifanya kiwe mshirika wa haraka kwa vitufe, mandhari ya sehemu kuu, mipaka na athari za maandishi.

Jinsi ya kutumia Jenereta ya CSS Gradient

  1. Chagua aina ya gradient: linear, radial au conic.
  2. Weka pembe (linear), umbo na nafasi (radial), au pembe ya kuanzia (conic).
  3. Bofya kwenye upau wa gradient ili kuongeza vituo vya rangi na uviburute kwenye nafasi.
  4. Ipe kila kituo rangi yake, uwazi na nafasi halisi.
  5. Jaribu mifano au kitufe cha kuchanganya bila mpangilio kwa msukumo wa haraka.
  6. Nakili thamani ya gradient au kanuni kamili ya CSS.

Maswali yanayoulizwa mara kwa mara

Gradient za linear huchanganya rangi kwenye mstari ulionyooka kwa pembe fulani. Gradient za radial husambaa nje kutoka kwenye kituo kama mduara au yai. Gradient za conic huzunguka rangi kuzunguka kituo — aina iliyopo nyuma ya chati za pai na gurudumu la rangi.

Angalau viwili, bila kikomo cha juu kinachoonekana. Vituo viwili au vitatu hutengeneza mandhari safi; vituo vilivyokaribiana sana hutengeneza mikanda migumu ya rangi, ndivyo athari za mistari na sehemu zinavyojengwa.

Ndiyo — kila kituo kina kidhibiti chake cha uwazi. Kituo chenye uwazi wa 0% hupunguza gradient hadi kutoweka, ambayo ndiyo njia ya kawaida ya kuchanganya kifuniko chenye rangi na picha au kupunguza sehemu kuu hadi mandhari ya ukurasa.

Sio moja kwa moja — vivinjari haviwezi kubadilisha kati ya thamani za gradient. Mbinu za kawaida: tia mwendo background-position juu ya gradient kubwa kupita kiasi, zungusha gradient ya conic kwa kutumia sifa maalum, au changanya vipengele viwili vilivyowekwa juu ya vingine.

Ndiyo, ni bure na hakina kikomo. Kinafanya kazi kabisa kwenye kivinjari chako, hivyo hakuna chochote unachotengeneza kinachohifadhiwa au kutumwa.
Shiriki hii
Zana Zinazohusiana
Kitengenezaji Sahihi ya Barua Pepe Buni sahihi ya barua pepe ya HTML yenye umbo la kitaalamu kutoka kwa templeti 30, ibinafsishe na uihifadhi. Bila Malipo
Ikoni hadi PNG Geuza Bootstrap Icons, Font Awesome na zaidi kuwa picha maalum za PNG — bure, ndani ya kivinjari chako. Bila Malipo
Kiunda Ikoni za Programu Unda seti kamili ya ikoni za programu iliyo tayari kwa duka kwa ajili ya App Store na Google Play — mandharinyuma bora ya gredienti, mesh na ruwaza, iliyoundwa kutoka nembo yako. Bila Malipo
Kitengeneza Favicon Tengeneza kifurushi kamili cha favicon kutoka kwa nembo, ikoni ya fonti au monogram — favicon.ico, PNG za kisasa, Apple touch icon, PWA icons, web manifest na kijisehemu cha HTML. Bila Malipo
Kizalishi cha CSS Box Shadow Tengeneza vivuli vya CSS box-shadow vilivyowekwa tabaka kwa kutumia vitelezi vya moja kwa moja vya umbali, ukungu, usambazaji, rangi, uwazi na inset — angalia muundo kwenye kipengele halisi na nakili CSS tayari kupachika papo hapo. Bila Malipo
Jenereta ya CSS Border Radius Tengeneza CSS border-radius kwa macho ukiwa na onyesho la moja kwa moja na nakili msimbo tayari kwa matumizi. Bila Malipo
Utafutaji maarufu
jenereta ya css gradient jenereta ya linear gradient css radial gradient css conic gradient css kitengeneza gradient ya mandharinyuma ya css zana ya vituo vya rangi vya gradient kichagua pembe ya css gradient jenereta ya gradient mtandaoni
Unahitaji msaada?
Umepata tatizo na zana hii? Tujulishe timu yetu.
Ripoti tatizo

Ongeza zana hii ya bure kwenye tovuti yako mwenyewe — nakili na ubandike msimbo ulio hapa chini.