Generator Gradientów CSS

Czym są gradienty CSS?

Gradienty CSS tworzą płynne, ciągłe przejścia między dwoma lub więcej kolorami bez używania obrazów. Są renderowane natywnie przez przeglądarkę, co oznacza, że skalują się do dowolnej rozdzielczości, ładują się natychmiast i nie generują żadnych żądań HTTP. Gradienty to jedno z najpotężniejszych narzędzi we współczesnym CSS do tworzenia wizualnie bogatych teł, przycisków i elementów dekoracyjnych.

Istnieją dwa główne typy gradientów CSS: gradienty liniowe, które przechodzą wzdłuż prostej linii, oraz gradienty radialne, które rozchodzą się na zewnątrz od punktu centralnego. Trzeci typ, gradienty stożkowe, obraca się wokół centralnego punktu jak koło kolorów. To narzędzie skupia się na gradientach liniowych i radialnych, które pokrywają zdecydowaną większość potrzeb projektowych.

Składnia gradientu CSS

Funkcja linear-gradient() przyjmuje kierunek (kąt lub słowo kluczowe), a następnie punkty zatrzymania koloru. Podstawowa składnia to background: linear-gradient(kąt, kolor1 pozycja1, kolor2 pozycja2). Kąt jest w stopniach — 0deg idzie od dołu do góry, 90deg od lewej do prawej, a 180deg od góry do dołu. Możesz dodać tyle punktów zatrzymania koloru, ile potrzebujesz.

Gradienty radialne używają radial-gradient(kształt rozmiar na pozycji, kolor1, kolor2). Kształt może być circle lub ellipse. Słowa kluczowe rozmiaru (closest-side, farthest-corner itd.) kontrolują, jak daleko rozciąga się gradient. Jeśli pominięte, przeglądarka używa wartości domyślnych, które zazwyczaj wyglądają poprawnie.

Jak korzystać z tego narzędzia

Wybierz kolory za pomocą próbników kolorów, dostosuj kąt gradientu za pomocą suwaka lub wpisując wartość stopni i dodaj lub usuń punkty zatrzymania koloru według potrzeb. Narzędzie generuje kod CSS w czasie rzeczywistym. Kliknij przycisk kopiowania, aby skopiować kompletną regułę CSS do schowka, a następnie wklej ją do swojego arkusza stylów.

Wskazówki projektowe dotyczące gradientów

Subtelne gradienty wyglądają bardziej profesjonalnie niż dramatyczne. Przesunięcie o 10–20 stopni w odcieniu między dwoma blisko spokrewnionymi kolorami tworzy elegancki, nowoczesny wygląd. Unikaj łączenia więcej niż trzech kolorów, chyba że celowo tworzysz efekt tęczy. Duże obszary korzystają z miękkich gradientów, podczas gdy małe elementy UI, takie jak przyciski, mogą obsługiwać odważniejsze przejścia.

W projektach trybu ciemnego nakładki gradientów na ciemnych tłach dodają głębi bez rozpraszania uwagi. Używaj półprzezroczystych punktów zatrzymania koloru (rgba lub hsla), aby tworzyć efekty przypominające szkło. Nakładaj wiele gradientów za pomocą przecinków we właściwości background dla złożonych kompozycji.

Kwestie wydajności

Gradienty CSS są akcelerowane przez GPU i niezwykle wydajne — znacznie lepsze niż ładowanie obrazów gradientowych. Jednak bardzo złożone gradienty z wieloma punktami zatrzymania koloru mogą powodować niewielkie różnice w renderowaniu między przeglądarkami. Zawsze testuj gradienty w Chrome, Firefox i Safari. Nowoczesne przeglądarki obsługują gradienty bez przedrostków dostawcy, więc -webkit-linear-gradient nie jest już potrzebny.

Często zadawane pytania

Czy mogę animować gradienty CSS?

CSS nie może animować wartości gradientu bezpośrednio za pomocą transition. Możesz jednak animować background-position przeciągniętego gradientu, użyć @property do animowania własnych właściwości wewnątrz gradientów lub przenikać między dwoma gradientami za pomocą opacity na pseudoelementach.

Jaka jest różnica między gradientem liniowym a radialnym?

Gradient liniowy przechodzi między kolorami wzdłuż prostej linii pod określonym kątem. Gradient radialny przechodzi na zewnątrz od punktu centralnego w kształcie okrągłym lub eliptycznym. Wybierz liniowy dla teł i banerów, a radialny dla efektów reflektora lub podświetleń przycisków.