Gradient CSS – Generator gradientów

Przede wszystkim gradient w CSS pozwalają na tworzenie płynnych przejść między dwoma lub więcej kolorami, co daje wiele możliwości stylizacji stron internetowych. Z pewnością dzięki gradientom można tworzyć atrakcyjne wizualnie efekty bez konieczności użycia obrazów, co może znacząco poprawić wydajność strony. Gradienty mogą być liniowe, radialne, a także kątowe, dając nieograniczone możliwości twórcze. Dodatkowo w tej lekcji przeprowadzę Cię przez podstawy i zaawansowane techniki pracy z gradientami w CSS. Co więcej omówię różne rodzaje gradientów oraz pokażę praktyczne przykłady ich zastosowania.

Rodzaje gradientów w CSS

W CSS istnieją trzy główne rodzaje gradientów:

• Linear gradient – gradient liniowy
• Radial gradient – gradient promienisty
• Conic gradient – gradient kątowy

Linear gradient – gradient liniowy

Gradient liniowy tworzy płynne przejście między dwoma lub więcej kolorami wzdłuż linii prostej.

Linear gradient – składnia

Podstawowa składnia gradientu liniowego to:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

• direction – Kierunek gradientu. Może być określony w stopniach (np. 45deg), przy użyciu słów kluczowych (np. to right, to bottom) lub domyślnie w dół.
• color-stop – Punkt koloru w gradiencie. Można określić tylko kolor lub dodać pozycję (np. red 30%).

Podstawowy gradient liniowy

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

Gradient liniowy z więcej niż dwoma kolorami

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

Gradient liniowy z określoną pozycją kolorów

div {
  background: linear-gradient(to right, red 20%, yellow 50%, green 80%);
}

Radial gradient – gradient promienisty

Gradient promienisty tworzy przejście między kolorami rozchodzące się promieniście od środka lub punktu ogniskowego.

Radial gradient – składnia

Podstawowa składnia gradientu promienistego to:

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

• shape – Kształt gradientu (circle lub ellipse).
• size – Rozmiar gradientu (closest-side, farthest-side, closest-corner, farthest-corner).
• position – Pozycja punktu ogniskowego (np. center, top left).
• color-stop – Punkt koloru w gradiencie.

Podstawowy gradient promienisty

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

Gradient promienisty z więcej niż dwoma kolorami

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

Gradient promienisty z określoną pozycją

div {
  background: linear-gradient(to right, red 20%, yellow 50%, green 80%);
}

Conic gradient – gradient kątowy

Gradient kątowy tworzy przejście między kolorami wokół centralnego punktu, jak koło kolorów.

Conic gradient – składnia

Podstawowa składnia gradientu kątowego to:

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

• angle – Kąt początkowy gradientu.
• position – Pozycja centralnego punktu gradientu.
• color-stop – Punkt koloru w gradiencie.

Podstawowy gradient kątowy

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

Gradient kątowy z określonym kątem początkowym

div {
  background: conic-gradient(from 90deg, red, yellow, green);
}

Zaawansowane techniki stosowanie gradientów

Przezroczystość w gradientach

Możemy także ustawić przezroczystość dla gradientów przy użyciu kolorów RGBA lub HSLA.

div {
  background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5));
}

Gradienty na obrazach

Gradienty mogą być nakładane na obrazy, tworząc efekty nakładania kolorów.

div {
  background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)), url('image.jpg');
  background-size: cover;
}

Animowane gradienty

Gradienty mogą być animowane przy użyciu właściwości @keyframes w CSS.

@keyframes gradientAnimation {
  0% { background: linear-gradient(to right, red, yellow); }
  50% { background: linear-gradient(to right, yellow, green); }
  100% { background: linear-gradient(to right, green, red); }
}

div {
  animation: gradientAnimation 5s infinite;
}

Praktyczne przykłady użycia gradientów

Tło strony z gradientem

HTML

<body class="gradient-background">
  <h1>Witaj w mojej stronie</h1>
</body>

CSS

.gradient-background {
  background: linear-gradient(to bottom, #ff7e5f, #feb47b);
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

Przyciski z gradientem

HTML

<button class="gradient-button">Kliknij mnie</button>

CSS

.gradient-button {
  background: linear-gradient(to right, #6a11cb, #2575fc);
  border: none;
  color: white;
  padding: 10px 20px;
  text-transform: uppercase;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}

.gradient-button:hover {
  color: aqua;
  background: linear-gradient(to right, #2575fc, #6a11cb);
}

Generator gradientów w CSS

Gradient CSS – podsumowanie

Podsumowując użycie gradientów w CSS jest niezwykle wszechstronne, pozwalając na tworzenie złożonych i atrakcyjnych wizualnie efektów bez potrzeby używania obrazów. Dzięki zrozumieniu podstawowych typów gradientów – liniowych, promienistych i kątowych – oraz opanowaniu bardziej zaawansowanych technik, takich jak przezroczystość, animacje i gradienty nakładane na obrazy, możesz znacząco wzbogacić wygląd swoich projektów webowych.

Pamiętaj jednak, że gradienty powinny być używane z umiarem i zawsze z myślą o czytelności i wydajności strony. Dzięki praktyce i eksperymentowaniu możesz odkryć pełny potencjał gradientów w CSS i tworzyć strony internetowe, które są zarówno ciekawe wizualnie jak i funkcjonalne.