Gradienty

Gradienty określane są jako wypełnienie pewnego obszaru płynnym przejściem pomiędzy przynajmniej dwoma kolorami. Gradienty zostały wprowadzone w CSS3, służą one głównie do tworzenia tła

{
 background: typ gradientu ( kierunek rozchodzenia się kolorów, barwa1, barwa2,..}
}

{
 background: linear-gradient(to right, red, yellow);  
}

Powyższy gradient jest gradientem liniowy z przejściem kolorów od lewej do prawej przy wykorzystaniu dwóch kolorów

{
 background: linear-gradient(red, blue);   
}

Kolejny gradient również jest gradientem liniowym, tym razem gradient rozchodzi się z góry na dół.

{
 background: linear-gradient(to bottom right, gold 14% , lightyellow 86%);
}

Następny gradient to kolejny typ rozchodzenia się koloru, parametry określają, że gradient rozpocznie się w lewym-górnym rogu i skończy w prawym-dolnym rogu.

{
 background: repeating-linear-gradient( blue 10%, white 20%, violet 30%); 
}

W tym przypadku kierunek zmiany barw jest taki sam jak poprzednio, przedstawia on trójkolorowy gradient liniowy powtarzalny.

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

Piąty gradient jest pierwszym prezentującym gradient radialny, w którym kolory rozchodzą się w kształtach kolistych.

{
 background: repeating-radial-gradient(#FFCCFF, #CC3399 10%, #660033 15%);
}

Ostatni gradient jest gradientem promienistym powtarzalnym, stworzony gradient jest powielany w kierunkach rozchodzenia się gradientu.

Do góry