Jak działa Generator gradientów
Narzędzie to umożliwia tworzenie gradientów CSS poprzez wybór ich typu, dostosowanie kierunku lub kształtu oraz dodanie do ośmiu punktów kontrolnych koloru. W miarę wprowadzania zmian prezentowany jest podgląd gradientu na żywo, a wygenerowany kod CSS można skopiować jednym kliknięciem.
Początkowy gradient zawiera dwa punkty kontrolne koloru: #6366f1 0% oraz #ec4899 100%. Nowo dodane punkty kontrolne koloru domyślnie przyjmują pozycję 50%.
Parametry wejściowe narzędzia
Podczas projektowania gradientu użytkownik ma do dyspozycji następujące opcje konfiguracyjne:
- Typ gradientu: Do wyboru są trzy opcje: Liniowy (linear), Kołowy (radial) oraz Stożkowy (conic).
- Kąt: Wartość liczbowa określająca kierunek dla gradientów liniowych lub stożkowych.
- Kształt: Elipsa (ellipse) lub Koło (circle) w przypadku gradientów kołowych.
- Punkty kontrolne koloru: Możliwość dodania maksymalnie ośmiu punktów kontrolnych, z których każdy posiada dwa parametry:
- Kolor punktu: Konkretna wartość koloru.
- Pozycja: Wartość procentowa w przedziale od 0% do 100%.
Gdy w narzędziu znajduje się już osiem punktów kontrolnych, przycisk „Dodaj punkt” staje się nieaktywny.
Wyniki działania generatora
Narzędzie generuje dwa rezultaty na podstawie wprowadzonych ustawień:
- Podgląd: Wizualna prezentacja stworzonego gradientu wyświetlana na żywo.
- CSS: Wygenerowany kod CSS opisujący zdefiniowany gradient, gotowy do skopiowania. Po kliknięciu przycisku „Kopiuj CSS” jego stan zmienia się na „Skopiowano”.
Zastosowanie gradientów CSS w projektowaniu stron
Narzędzie to odpowiada na potrzeby różnych grup użytkowników zajmujących się tworzeniem stron internetowych:
- Osób, które chcą stworzyć tło CSS dla swoich projektów.
- Użytkowników potrzebujących szybkiej regulacji dwóch kolorów oraz kierunku przejścia tonalnego.
- Projektantów oraz deweloperów front-endu, którzy wymagają precyzyjnej kontroli nad typem, pozycją oraz wieloma punktami kontrolnymi tworzonego gradientu.
Zasady działania i charakterystyka typów gradientów
Każdy z dostępnych typów gradientów charakteryzuje się odmiennym sposobem rozprowadzania barw:
- Gradient liniowy (linear): Łączy kolory wzdłuż linii prostej, a suwak kąta określa kierunek tego przejścia. Kąt 0° wskazuje kierunek w górę, natomiast kąt 90° skierowany jest w prawą stronę.
- Gradient kołowy (radial): Rozchodzi się od środka na kształt koła lub elipsy. Ten typ gradientu nie wykorzystuje parametru kąta – zamiast tego użytkownik wybiera kształt koła lub elipsy.
- Gradient stożkowy (conic): Owija kolory wokół punktu centralnego, przypominając koło barw. Podobnie jak w przypadku gradientu liniowego, kierunek określa się za pomocą suwaka kąta, gdzie 0° wskazuje górę, a 90° prawą stronę.
Każdy punkt kontrolny reprezentuje kolor przypisany do określonej pozycji na osi gradientu, gdzie 0% oznacza początek, a 100% koniec przejścia tonalnego.
Bezpieczeństwo i prywatność danych
Każdy gradient jest generowany bezpośrednio w Państwa przeglądarce. Żadne parametry ustawione w narzędziu nie są przesyłane do BroBroGo.
Często zadawane pytania (FAQ)
Jaka jest różnica między gradientem liniowym, kołowym a stożkowym? Gradient liniowy (linear) płynnie łączy kolory wzdłuż prostej linii pod określonym kątem. Gradient kołowy (radial) rozchodzi się od środka na kształt koła lub elipsy. Gradient stożkowy (conic) owija kolory wokół punktu centralnego, przypominając koło barw.
Czym są punkty kontrolne koloru (color stops)? Każdy punkt kontrolny (color stop) to kolor przypisany do określonej pozycji na osi gradientu — od 0% na początku do 100% na końcu. Przesunięcie punktu zmienia miejsce, w którym dany kolor osiąga pełne nasycenie. Można dodać do ośmiu punktów, aby uzyskać bogatsze przejścia tonalne.
Jak kontrolować kierunek gradientu? W przypadku gradientu liniowego lub stożkowego suwak kąta określa kierunek — 0° wskazuje górę, 90° prawą stronę. Gradient kołowy nie posiada kąta; zamiast tego wybiera się kształt koła (circle) lub elipsy (ellipse), aby zmienić sposób jego rozchodzenia się.