Gradienți CSS. Setați forma. Utilizarea cuvintelor cheie de dimensiuni diferite.

Setați forma (Set Shape)

Parametrul shape definește forma. Poate lua cercul de valori sau elipsa. Valoarea implicită este elipsa.

Următorul exemplu arată un gradient radial sub forma unui cerc:



Exemplu:

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Utilizarea cuvintelor cheie de dimensiuni diferite (Use of Different Size Keywords)

Parametrul size definește dimensiunea gradientului. Poate lua patru valori:

• closest-side
• farthest-side
• closest-corner
• farthest-corner

Exemplu:

Un gradient radial cu cuvinte cheie de dimensiuni diferite:

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}