Kigeuzi cha Bure

Gradient ya CSS Jenereta

Tengeneza gradient za CSS kwa macho kwa onyesho la moja kwa moja. Unda mikunjo ya mstari, radial na laini kwa kutumia vituo maalum vya rangi - bila malipo na upande wa mteja.

Hakiki ya Moja kwa Moja
Pato la CSS
.element {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}
Gradient Type
Pembe (90deg)
90°180°270°360°
Color Stops
#6366f10%
#ec4899100%

Kuhusu zana hii

Unda gradient nzuri za mstari na radial za CSS ukitumia kihariri cha kuona. Chagua rangi, rekebisha vituo, badilisha mwelekeo au pembe na uone sasisho la onyesho la moja kwa moja katika wakati halisi. Nakili msimbo wa CSS uliozalishwa - ikiwa ni pamoja na viambishi awali vya wauzaji kwa vivinjari vya zamani - na ubandike moja kwa moja kwenye laha yako ya mitindo.

Jinsi ya kutumia

  1. Chagua aina ya gradient: mstari au radial.
  2. Ongeza vituo vya rangi kwa kubofya upau wa gradient na kuchagua rangi.
  3. Rekebisha pembe ya gradient (linear) au nafasi (radial) kwa kutumia vidhibiti.
  4. Nakili msimbo wa CSS uliozalishwa kutoka kwa paneli ya kutoa.

Maswali yanayoulizwa mara kwa mara

Je, gradient za CSS hufanya kazi katika vivinjari vyote?
Gradients za kisasa za CSS (linear-gradient, radial-gradient) zinatumika katika vivinjari vyote vya sasa ikiwa ni pamoja na Chrome, Firefox, Safari, na Edge. Zana inaweza kwa hiari kuzalisha -webkit- viambishi awali kwa matoleo ya zamani ya kivinjari.
Je, ninaweza kuunda gradients za rangi nyingi?
Ndiyo. Ongeza vituo vingi vya rangi unavyohitaji. Unaweza pia kurekebisha nafasi ya kila kituo ili kudhibiti ambapo rangi huchanganyika. Hii inaruhusu upinde wa mvua changamano, machweo, au viwango maalum vya chapa.
Kuna tofauti gani kati ya gradient ya mstari na radial?
Gradients za mstari hubadilisha rangi kwenye mstari ulionyooka (juu hadi chini, kushoto kwenda kulia, ulalo, au pembe yoyote). Gradients za radial hubadilisha rangi kuelekea nje kutoka sehemu ya katikati katika umbo la duara au duaradufu.
Ninaweza kutumia gradient kama msingi wa maandishi?
Ndiyo. Tumia klipu ya usuli: maandishi yenye -webkit-text-fill-color: transparent ili kutumia gradient kwenye maandishi. CSS iliyotengenezwa hutoa ufafanuzi wa gradient - unganisha na sifa hizi kwa maandishi ya gradient.