Generator Gradientów CSS — Gradienty Liniowe i Radialne

Generator Gradientów CSS — Projektuj Gradienty Wizualnie

Twórz wspaniałe gradienty CSS za pomocą wizualnego edytora na żywo. Dodaj dowolną liczbę punktów koloru, wybierz gradienty liniowe, radialne lub stożkowe, dostosuj kąt i skopiuj gotowy do użycia kod CSS. Idealne do tł, przycisków, kart i sekcji hero.

Typy gradientów

• Liniowy: kolory przenikają wzdłuż prostej linii pod dowolnym kątem (0–360°)
• Radialny: kolory promieniują od środka, jako koło lub elipsa
• Stożkowy: kolory obracają się wokół punktu centralnego (idealne do kół kolorów i efektów wykresu kołowego)

Funkcje

• Nieograniczone punkty koloru: dodawaj lub usuwaj kolory dowolnie
• Kontrola pozycji: przesuwaj każdy kolor od 0% do 100%
• Kontrola kąta: precyzyjnie obracaj gradienty liniowe i stożkowe
• Podgląd na żywo: obserwuj natychmiastową aktualizację gradientu
• Przycisk losowy: wygeneruj nową kombinację kolorów dla inspiracji
• Czysty output CSS: skopiuj pojedynczą linię gotową do wklejenia

Jak używać CSS

Skopiuj wygenerowany kod i zastosuj go do dowolnego elementu. Na przykład:

.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
}

Wskazówki

• Dwa lub trzy kolory zwykle wyglądają czyściej niż wiele
• Dla subtelnych tł użyj kolorów blisko siebie na kole kolorów
• Dla żywych efektów użyj kolorów dopełniających
• Gradienty stożkowe są idealne do spinnerów ładowania i selektorów kolorów

Prywatność

To narzędzie działa całkowicie w Twojej przeglądarce. Nic nie jest przesyłane ani przechowywane.

Krok po kroku

1. Wybierz typ: liniowy, radialny lub stożkowy.
2. Przy gradiencie liniowym ustaw kąt, a przy radialnym kształt (koło lub elipsa).
3. Dodaj punkty koloru i przesuwaj je. Przycisk Losowy podsuwa nowe pomysły.
4. Skopiuj kod przyciskiem Kopiuj CSS.

Najczęstsze pytania

Jak użyć kodu?
Wklej go jako background lub background-image w regule CSS, na przykład dla tła sekcji lub przycisku.

Co to jest gradient stożkowy?
Kolory obracają się wokół punktu środkowego, jak na wykresie kołowym albo kole barw.

Ile punktów koloru mogę użyć?
Tyle, ile chcesz. Więcej punktów daje większą kontrolę, ale utrudnia czytanie i utrzymanie kodu.