Unda gradients nzuri za CSS bila kujitahidi

Tengeneza gradients nzuri za mstari, radial, na koni ukitumia kiolesura chetu angavu. Nakili msimbo wa CSS na uitumie katika miradi yako papo hapo.

Preview

CSS iliyozalishwa

background: linear-gradient(135deg, #4F46E5, #8B5CF6);

Udhibiti wa Gradient

135°
0%
100%

Mipangilio maarufu

Mifano ya Gradient

Gundua mifano hii ya kuvutia ya gradient na upate msukumo kwa mradi wako unaofuata. Bofya kwenye gradient yoyote ili kuipakia kwenye jenereta.

Blush ya machweo

Gradient ya joto iliyoongozwa na machweo mazuri ya jua.

Upepo wa Bahari

Gradient tulivu inayoibua hisia za maji ya pwani.

Mchanganyiko wa Mint

Gradient safi na ya kisasa inayochanganya mint na bluu ya anga.

Bustani ya Lush

Gradient mahiri inayowakilisha uzuri wa asili.

Ndoto ya Cosmic

Gradient ya kichawi iliyoongozwa na anga ya usiku.

Saa ya Dhahabu

Gradient ya joto inayokamata kiini cha jioni.

Nyaraka za Gradient

Gradients za CSS ni nini?

Gradients za CSS hukuruhusu kuonyesha mabadiliko laini kati ya rangi mbili au zaidi. Wanaweza kutumika kama asili ya vipengele na kuja katika aina tatu tofauti:

  • Gradients za mstari:Rangi za mpito kwenye mstari wa moja kwa moja.
  • Gradients za radial:Rangi za mpito kutoka katikati kuelekea nje.
  • Gradients za Conic:Rangi za mpito kuzunguka sehemu ya katikati kwenye mduara.

Jinsi ya kutumia gradients

Mara tu unapotengeneza gradient kwa kutumia zana yetu, unaweza kutumia msimbo wa CSS katika miradi yako:

  1. Nakili msimbo wa CSS kutoka kwa jenereta.
  2. Bandika kwenye faili yako ya CSS, au uitumie ndani ya mstari katika vipengele vyako vya HTML.
  3. Tumia gradient kwa kipengele chochote kwa kutumiabackground property.
.my-element {
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

  • Tumia rangi zaidi ya mbili kwa athari ngumu zaidi ya gradient.
  • Rekebisha nafasi za rangi ili kudhibiti mahali ambapo mabadiliko hutokea.
  • Changanya gradients nyingi kwa athari za ubunifu zaidi.
  • Kwa gradients za conic, kubadilisha katikati huunda mifumo ya kuvutia.
  • Hifadhi gradients zako uzipendazo kwa matumizi ya baadaye.

Msaada wa kivinjari

Gradients za CSS zinasaidiwa sana katika vivinjari vya kisasa. Hata hivyo, vivinjari vya zamani kama vile Internet Explorer haviwezi kuvitoa kwa usahihi. Daima toa rangi ya kurudi nyuma:

.my-element {
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}

Chrome

26+

Firefox

16+

Safari

6.1+

Edge

12+

Kuhusu zana hii

Jenereta yetu ya CSS Gradient imeundwa kusaidia wasanidi programu na wabunifu kuunda gradients nzuri bila kujitahidi. Iwe unafanya kazi kwenye tovuti, programu, au unataka tu kujaribu rangi, zana hii hurahisisha kutoa gradient inayofaa kwa mradi wako.

Features

Rahisi kutumia

Kiolesura angavu cha kuunda gradients.

Ubunifu msikivu

Inafanya kazi kikamilifu kwenye saizi zote za skrini.

Nakili-Bandika Tayari

Pata msimbo safi wa CSS papo hapo.

Mipangilio ya awali inapatikana

Anza na gradients nzuri zilizoainishwa mapema.

Related Tools

Jenereta ya Mpito ya CSS3

Mpito laini wa opacity

Tengeneza Mabadiliko ya CSS3 kwa Urahisi

Zana yenye nguvu na angavu ya kuunda mabadiliko changamano ya CSS3 bila kuandika msimbo. Taswira ya mabadiliko katika muda halisi na unakili CSS inayozalishwa ili utumie katika miradi yako.

Sass kwa Kigeuzi cha CSS

Badilisha msimbo wako wa Sass kuwa CSS. Haraka, rahisi, na salama.

RGB hadi Pantone

Badilisha rangi za RGB za dijiti hadi sawa na Pantone® zilizo karibu zaidi

Mhariri wa JSON

Hariri JSON Kubwa kwa Urahisi - Umeme Haraka na Laini

Unda gradients nzuri za CSS bila kujitahidi

Tengeneza gradients nzuri za mstari, radial, na koni ukitumia kiolesura chetu angavu. Nakili msimbo wa CSS na uitumie katika miradi yako papo hapo.