funkcja CSS linear-gradient()

definicja i użycie

CSS linear-gradient() funkcja do tworzenia liniowego gradientu jako tła.

Aby utworzyć liniowy gradient, należy zdefiniować co najmniej dwa znaczniki kolorów. Znaczniki kolorów to kolory, między którymi ma być realizowany gładki przejście. Można również ustawić punkt startowy i kierunek (lub kąt) oraz efekt gradientu.

przykłady liniowych gradientów:

przykład

przykład 1

ten liniowy gradient zaczyna się od góry. Przechodzi od czerwonego do żółtego, a następnie do niebieskiego:

#grad {
  background-image: liniowy gradient (czerwony, żółty, niebieski);
}

Spróbuj sam

przykład 2

liniowy gradient zaczynający się od lewej. Przechodzi od czerwonego do niebieskiego:

#grad {
  background-image: liniowy gradient (od lewej, czerwony, niebieski);
}

Spróbuj sam

przykład 3

liniowy gradient zaczynający się od lewego górnego rogu (i rozciągający się do prawego dolnego rogu):

#grad {
  background-image: liniowy gradient (od lewego górnego rogu do prawego dolnego rogu, czerwony, niebieski);
}

Spróbuj sam

przykład 4

liniowy gradient określony pod kątem:

#grad {
  background-image: liniowy gradient (180 stopni, czerwony, niebieski);
}

Spróbuj sam

przykład 5

liniowy gradient zawierający wiele kolorów:

#grad {
  background-image: liniowy gradient (od lewej do prawej, czerwony, pomarańczowy, żółty, zielony, niebieski, indygo, fioletowy);
}

Spróbuj sam

Przykład 6

Liniowy gradient z dwoma etykietami kolorów:

#grad {
  background: linear-gradient(
    do prawej,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Spróbuj sam

Przykład 7

Liniowy gradient z przezroczystością:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Spróbuj sam

Gramatyka CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

Szczegóły techniczne

Wsparcie przeglądarki

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

Strony związane

Tutorial:CSS gradient

Odniesienie:Atrybut background-image CSS

Odniesienie:Funkcja CSS conic-gradient()

Odniesienie:Funkcja CSS radial-gradient()

Odniesienie:Funkcja CSS repeating-conic-gradient()

Odniesienie:Funkcja CSS repeating-linear-gradient()

Odniesienie:Funkcja CSS repeating-radial-gradient()