CSS gradijenti su prijelazi između dvije ili više boja. Koriste se za vizualne efekte i pozadine na web stranicama.
Gradijenti se postavljaju pomoću svojstva background-image.
Prednosti CSS gradijenata:
Radijalni gradijent ide iz centra prema van, dok linearni ide u ravnoj liniji.
Oblici mogu biti circle i ellipse. Zadani je ellipse.
Centar možemo pomaknuti npr. at top left.
Najjednostavnija sintaksa:
background-image: linear-gradient(red, blue);
Zadani smjer je od gore prema dolje.
Smjer možemo promijeniti ključnim riječima npr. to right, to bottom right.
Možemo koristiti i stupnjeve npr. 90deg, 180deg.
Primjer color stopova:
background-image: linear-gradient(red 20%, blue);
Funkcije su: