Gradient Forgé
Design beautiful CSS3 linear and radial gradients.
Color Stops
Orientation
CSS Output
Quick Presets
Polecane narzędzia
Wybrane narzędzia, które mogą Ci się przydać
Tworzenie gradientów CSS wizualnie
Overview
Gradienty CSS tworzą płynne przejścia kolorów dla teł, przycisków i nakładek. Ręczne pisanie składni gradientu jest niewygodne. Generator pozwala wybrać kolory i kierunek wizualnie i dostarcza gotowy CSS, z podglądem na żywo w przeglądarce.
How to Use (Step by Step)
- 1
Wybierz kolory
Dodaj dwa lub więcej punktów koloru.
- 2
Dostosuj typ i kąt
Liniowy, radialny lub stożkowy, z żądanym kierunkiem.
- 3
Skopiuj CSS
Wklej wygenerowaną właściwość background do arkusza stylów.
How It Works
Wybierasz punkty koloru (stops), ich pozycje i typ gradientu — liniowy, radialny lub stożkowy — a narzędzie buduje odpowiednią właściwość background. Liniowe biegną w linii prostej pod kątem; radialne promieniują ze środka. Dodawanie punktów i regulacja pozycji wyznaczają przejście. Widzisz wynik na żywo i kopiujesz CSS.
When to Use This
Stworzenie gradientu tła dla sekcji hero. Ozdobienie przycisku lub karty przejściem koloru. Prototypowanie schematu kolorów przed zapisaniem w kodzie.
Frequently Asked Questions
Liniowy przechodzi w linii prostej pod kątem; radialny promieniuje na zewnątrz z punktu środkowego w okręgu lub elipsie.