Generator gradientów

Projektuj gradienty liniowe, kołowe lub stożkowe, dodawaj punkty kontrolne, określaj kierunek i kopiuj kod CSS jednym kliknięciem.

Typ gradientu
Punkty kontrolne koloru
CSS
Dostosuj punkty kontrolne i kierunek, aby ukształtować gradient.

Każdy gradient jest generowany bezpośrednio w Państwa przeglądarce. Żadne parametry nie są przesyłane do BroBroGo.

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ę.

Generator CSS Cubic BezierPrzeciągaj dwa uchwyty, aby ukształtować dynamikę ruchu, porównaj ją z ruchem jednostajnym i skopiuj gotową wartość cubic-bezier().Generator Box ShadowDostosuj parametry cienia suwakami, łącz warstwy dla uzyskania głębi i błyskawicznie kopiuj gotowy kod CSS.Generator Border RadiusZaokrąglaj rogi za pomocą suwaków, twórz organiczne kształty w trybie eliptycznym i błyskawicznie kopiuj kod CSS.Generator FlexboxKonfiguruj kontener flex i jego elementy za pomocą wizualnych kontrolek, obserwuj zmiany na żywo i skopiuj kod CSS jednym kliknięciem.Generator CSS GridZdefiniuj kolumny i wiersze, zaznacz obszary myszką, aby rozmieścić elementy, i jednym kliknięciem skopiuj kod CSS wraz z pasującym kodem HTML.Kalkulator CSS clamp()Wprowadź rozmiar dla małych i dużych ekranów, aby uzyskać płynną wartość clamp(), która idealnie skaluje się pomiędzy nimi — dla czcionek, paddingów lub marginesów.Konwerter kolorówKonwertuj kolory między formatami HEX, RGB, HSL, HSV, CMYK i LAB — edytuj jedno pole, a reszta dostosuje się automatycznie.Narzędzie do upiększania i minifikacji CSSPoprawiaj wcięcia w nieuporządkowanym kodzie CSS, aby był czytelny, lub minifikuj go do wdrożenia — z bezpiecznym trybem, który nigdy nie zmienia kolejności reguł.Tester kontrastuWprowadź kolor tekstu i tła, aby sprawdzić współczynnik kontrastu WCAG oraz zgodność z normami AA i AAA.