CSS Gradient Generator

Tworzenie liniowych i radialnych gradientów CSS wizualnie z podglądem na żywo.

{{ stop.position }}%
{{ cssOutput }}

Czym jest gradient CSS?

Gradienty CSS tworzą płynne przejścia kolorystyczne między dwoma lub więcej kolorami. Są powszechnie używane jako tła przycisków, nagłówków, sekcji hero i elementów dekoracyjnych. Użyj linear-gradient(), aby utworzyć przejścia liniowe pod dowolnym kątem, lub radial-gradient() dla przejść kołowych lub eliptycznych.

Linear Gradient vs. Radial Gradient

Linear Gradient przebiega wzdłuż prostej osi — z góry na dół, z lewej na prawą lub pod dowolnym kątem. Radial Gradient promieniuje na zewnątrz od punktu centralnego, jako koło lub elipsa. Oba typy obsługują dowolną liczbę punktów koloru z regulowaną pozycją.

Wskazówki dotyczące pięknych gradientów

  • Użyj maksymalnie 2–3 kolorów, aby uzyskać czysty wygląd.
  • Podobne odcienie (np. niebieski → teal) tworzą harmonijny efekt.
  • Nie umieszczaj punktów koloru zbyt blisko siebie, aby uniknąć ostrych krawędzi.
  • Przetestuj gradient na różnych rozmiarach ekranu.