⭐ 0
🔍
Tekst Obraz PDF i Dokumenty Audio Muzyka Elektronika Czas Użyteczne programy Walidatory Ezoteryka Gry

Generator gradientów liniowych CSS

Twórz wizualnie gradienty CSS: liniowe, promieniowe lub stożkowe, suwak kąta i do sześciu stopni kolorów z podglądem na żywo o pełnej szerokości i kodem, który można kopiować.

90°
Przetwarzanie... 0%

Wynik

Ta strona otwiera generator gradientów z już wybranym typem liniowym. Przeciągnij suwak kąta, aby obrócić zanikanie, dostosować zatrzymania kolorów i podgląd pełnej szerokości oraz aktualizację linii CSS na każdym wejściu.

linear-gradient() maluje kolory wzdłuż linii prostej — zdecydowanie najczęściej używanego gradientu w CSS. 90 stopni biegnie od lewej do prawej, 180 stopni od góry do dołu, a każdy kąt pomiędzy nimi tworzy przekątną; pozycje zatrzymania w procentach decydują, gdzie poszczególne pasma kolorów zaczynają się łączyć z następnymi.

Gdy podgląd będzie wyglądał prawidłowo, skopiuj linię tła do arkusza stylów. Jeśli chcesz mieć punkt wyjścia zamiast pustej planszy, strony ustawień zachodu słońca, oceanu i pasteli otwierają to samo narzędzie z już załadowanymi sprawdzonymi parami kolorów.

🛡️
Wykonywane w przeglądarce

Twoje pliki i dane nigdy nie opuszczają tego urządzenia. Przetwarzanie odbywa się całkowicie offline. W 100% bezpieczne.

Zasady i formaty

  • Wybór typu gradientu (liniowy, promieniowy, stożkowy) za pomocą suwaka kąta dla trybów liniowego i stożkowego.
  • Lista przystanków kolorów: dwa przystanki do rozpoczęcia, dodawanie lub usuwanie do sześciu, każdy z własnym próbnikiem kolorów i pozycją w procentach.
  • Kopiowalna linia CSS tła oraz gotowe, gotowe strony dla gradientów zachodu słońca, oceanu i pasteli.

Kluczowe korzyści

✓ Podgląd o pełnej szerokości jest odświeżany przy każdej zmianie — typie, kącie i każdym przystanku koloru — więc kopiowany CSS jest dokładnie tym, co widziałeś.
✓ Do sześciu przystanków kolorów z indywidualnymi pozycjami obejmuje wszystko, od prostego dwukolorowego zanikania po złożone wielopasmowe tła.
✓ Jedna deklaracja, trzy silniki: przełączaj między liniowym, promieniowym i stożkowym bez przebudowy przystanków.

Przypadki użycia

  • • Skomponuj tło sekcji głównej, przeciągając znaczniki kąta i koloru, zamiast ręcznie edytować funkcję linear-gradient() i wczytywać ją ponownie.
  • • Porównaj przystanki tego samego koloru z gradientami liniowymi, promieniowymi i stożkowymi za pomocą jednego przełącznika — przystanki przenoszą się między typami.
  • • Wybierz sprawdzoną kombinację ze strony ustawień zachodu słońca, oceanu lub pasteli i dostosuj ją do kolorów swojej marki.