🌅Generator Gradientu CSS

Różnice między linear, radial i conic

CSS oferuje 3 funkcje gradientu z różnymi sposobami zmiany kolorów, wszystkie używane w właściwości background.

• linear-gradient：linear-gradient tworzy gradient liniowy, w którym kolory zmieniają się wzdłuż linii prostej pod określonym kątem.
• radial-gradient：radial-gradient tworzy gradient radialny, w którym kolory rozszerzają się w kształcie koła lub elipsy od pozycji środka na zewnątrz.
• conic-gradient：conic-gradient tworzy gradient stożkowy, w którym kolory zmieniają się zgodnie z ruchem wskazówek zegara wokół pozycji środka.

Odpowiedniość kątów i słów kluczowych kierunku

W linear-gradient 0deg wskazuje kierunek od dołu do góry, a zwiększające się wartości obracają się zgodnie z ruchem wskazówek zegara. Kąty można też zapisać słowami kluczowymi, np. 90deg odpowiada „to right", a 180deg odpowiada „to bottom".

Punkty zatrzymania koloru i przezroczystość

Punkty zatrzymania koloru (color stop) to pozycje w gradiencie, gdzie pojawia się dany kolor; 0% to punkt początkowy, 100% to punkt końcowy. Na przykład „#3B82F6 0%, #8B5CF6 100%" oznacza zmianę z niebieskiego na fioletowy.

• Format #RRGGBB：Format #RRGGBB reprezentuje kolor jako szesnastkowe wartości dla czerwieni, zieleni i błękitu (2 cyfry każda), np. #FF0000 to nieprzezroczysty czerwony.
• Format rgba：Format rgba określa kolor za pomocą wartości czerwieni, zieleni i błękitu (0–255) oraz przezroczystości (0–1), gdzie 0,5 oznacza 50% przezroczystość.