Gradient ya CSS ya Mkondoni - Jenereta, Kitengenezaji, na Mandharinyuma

Color

Zana ya Mkondoni ya CSS ya Mtandaoni

CSS Gradient ni tovuti ndogo yenye furaha na isiyolipishwa inayokuruhusu kuunda mandhari ya gradient kwa tovuti. 

Gradients za CSS hukuruhusu kuonyesha mabadiliko kati ya rangi mbili au zaidi zilizobainishwa.

CSS inafafanua aina mbili za gradients:

  • Gradients za mstari (huenda chini/juu/kushoto/kulia/kishazari)
  • Gradients za Radi (zilizofanuliwa na kituo chao)

CSS Linear Gradients

Ili kuunda gradient ya mstari lazima ueleze vituo viwili vya rangi. Vituo vya rangi ni rangi unazotaka kufanya mabadiliko laini kati yao. Unaweza pia kuweka mahali pa kuanzia na mwelekeo (au pembe) pamoja na athari ya gradient.

Sintaksia

background-image: linear-gradient(directioncolor-stop1color-stop2, ...);

CSS Radial Gradients

A radial gradient is defined by its center.

To create a radial gradient you must also define at least two color stops.

Syntax

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

By default, shape is ellipse, size is farthest-corner, and position is center.

Set Shape

The shape parameter defines the shape. It can take the value circle or ellipse. The default value is ellipse.

The following example shows a radial gradient with the shape of a circle: