Generator gradientów CSS

Zaprojektuj gradient kolorów na tło swojej strony i skopiuj CSS. Przeciągaj punkty na pasku, kliknij go, aby dodać kolory, i wybierz gradient liniowy, radialny lub stożkowy.

Gradient

Liniowy Radialny Stożkowy

Kąt:

Kształt

Środek

Powtarzaj (repeating-gradient)

Przykłady:

Kolory

Każdy kolor przyjmuje HEX, rgba(), hsl(), oklch() lub nazwę CSS; użyj transparent lub alfy mniejszej niż 1, aby wtopić go w tło.

Kod CSS

Rodzaje gradientów w CSS

linear-gradient() łączy kolory wzdłuż linii pod wybranym kątem (0deg od dołu do góry, 90deg od lewej do prawej). radial-gradient() rozkłada je w okręgi lub elipsy od środka, a conic-gradient() obraca je wokół punktu, jak na kole barw lub wykresie kołowym.

Wersje repeating-linear-gradient(), repeating-radial-gradient() i repeating-conic-gradient() powtarzają wzór: przy bliskich punktach (np. 0% i 10%) pozwalają tworzyć paski i kratkę bez obrazków.

Jak używać kodu

Gradienty to w CSS obrazy: stosuje się je przez background lub background-image, nigdy przez background-color. Wszystkie aktualne przeglądarki obsługują je bez prefiksów -webkit-.

Aby uzyskać tekst z gradientem, połącz tło z background-clip: text i color: transparent. A jeśli umieszczasz na nim tekst, sprawdź kontrast z najjaśniejszym kolorem gradientu.