Gradienți CSS. Gradienți radiali CSS. Gradient radial - Opriri uniforme ale culorilor. Gradient radial - Opriri de culori distanțate diferit.

Gradienți radiali CSS (CSS Radial Gradients)

Un gradient radial este definit de centrul său.
Pentru a crea un gradient radial trebuie să definiți, de asemenea, cel puțin două opriri de culoare (color stops).

Sintaxă



În mod implicit, forma este de elipsă, dimensiunea este cea mai îndepărtată de colț, iar poziția este centrală.

Gradient radial - Opriri uniforme ale culorilor/ Radial Gradient - Evenly Spaced Color Stops  (aceasta este implicită)

Următorul exemplu arată un gradient radial cu opriri uniforme de culoare distanțate:



Exemplu:

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

Gradient radial - Opriri de culori distanțate diferit / Radial Gradient - Differently Spaced Color Stops

Următorul exemplu arată un gradient radial cu opriri de culoare distanțate diferit:



Exemplu:

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}