Generator gradientów CSS

Jak używać

1. Zacznij od gotowego wzoru albo domyślnego gradientu.
2. Kliknij pasek, aby dodać kolory; przeciągaj punkty, aby je przesunąć.
3. Wybierz Liniowy, Radialny lub Stożkowy i dostosuj kąt lub środek.
4. Skopiuj deklarację CSS albo klasę Tailwind.

Opis opcji

Liniowy

Kolory zmieniają się wzdłuż linii prostej. 0° idzie do góry, 90° w prawo, a 180° w dół.

Radialny

Kolory rozchodzą się od punktu środkowego jako okrąg lub elipsa dopasowana do elementu.

Stożkowy

Kolory zataczają krąg wokół punktu środkowego, jak koło kolorów albo wykres kołowy.

Powtarzaj

Powtarza wzór; ustaw punkty w krótkim zakresie, na przykład od 0% do 10%, aby uzyskać paski.

Jak wygląda wygenerowany kod

Te same dwa kolory zapisane przez każdy typ. Punkty zatrzymania są zawsze zapisywane z pozycją w procentach:

linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)

Wersja Tailwind opakowuje tę samą wartość w klasę z wartością dowolną. Spacje zamieniają się na podkreślenia, a spacje po przecinkach są usuwane:

bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]

W ostatnim wierszu CSS wzór powtarza się co 10% elementu, co daje cienkie paski. W gradientach stożkowych kąt to miejsce, od którego zaczyna się przeciąganie, a w radialnych dwa procenty to środek.

Najczęściej zadawane pytania

Prywatność

To narzędzie działa w całości w przeglądarce. Twoje pliki i tekst są przetwarzane na Twoim urządzeniu i nigdy nie trafiają na nasze serwery.