CSS Gradiant Background omogućuje nam prikaz glatkih prijelaza između dvije ili više zadanih boja

CSS definira 2 vrste gradijana:

-Linearni gradijani (idu prema dolje / gore / lijevo / desno / dijagonalno)

-Radijalni gradijani (definira ih središte)

Da biste stvorili linearni gradijent, morate definirati najmanje dva zaustavljanja u boji. Stop boje su boje među kojima želite učiniti glatke prijelaze. Također možete postaviti početnu točku i smjer (ili kut) zajedno s efektom gradijenta.

Sintaksa:
background-image: linear-gradiant(direction, color-stop1,color-stop2, ...)

Radijalni gradijent definiran je njegovim središtem.

Da biste stvorili radijalni gradijent, također morate definirati najmanje dva zaustavljanja u boji.

Sintaksa:

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