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.