Generator gradientów CSS
Twórz gradienty liniowe, radialne i stożkowe CSS w przeglądarce.
Punkty zatrzymania koloru
Użyj uchwytów punktów zatrzymania lub klawiszy strzałek, aby edytować pozycje. Każdy punkt zatrzymania zawiera jawny kolor, przezroczystość i procent.
Lokalne przetwarzanie w przeglądarce
Twój gradient pozostaje w tej przeglądarce. Żadne kolory ani wygenerowany CSS nie są wysyłane do Convertr.
Ograniczona gramatyka importu
Import akceptuje linear-gradient(), radial-gradient() lub conic-gradient() z kolorami hex i procentami. Deklaracje, adresy URL, zmienne i nieznane funkcje są odrzucane lokalnie.
Dostępny kolor zastępczy
Wygenerowany CSS zawiera stały zastępczy kolor tła obok gradientu dla nieobsługiwanych rendererów i dostępnego chromu sterowania.
Często zadawane pytania
Czy mój gradient jest przesyłany?
Nie. Stan gradientu, kolory, importowany CSS i wygenerowany CSS pozostają w Twojej przeglądarce.
Które typy gradientów CSS są obsługiwane?
Generator tworzy wyniki linear-gradient(), radial-gradient() i conic-gradient() z wieloma punktami zatrzymania koloru hex.
Co mogę importować?
Import akceptuje celowo ograniczoną gramatykę przy użyciu jednej obsługiwanej funkcji gradientu, kolorów hex, opcjonalnych procentów oraz ograniczonych wartości kąta lub pozycji.
Powiązane narzędzia dla programistów i projektantów
Generator gradientów CSS
Buduj liniowe lub radialne gradienty CSS i podglądaj kolor, kąt, pozycję i powtórzenia.
- Wejście
- Typ gradientu, punkty kolorów, pozycje, kąt i ustawienia powtarzania.
- Wyjście
- Podgląd na żywo i kopiowalna deklaracja tła CSS.
- Prawdziwe ograniczenia
- Renderowanie w przeglądarce może nieco różnić się w zależności od silnika, a narzędzie nie ocenia kontrastu ani nie gwarantuje wsparcia w starszych przeglądarkach.
- Prywatność i przetwarzanie danych
- typ gradientu, punkty kolorów, pozycje, kąt i ustawienia powtarzania są przetwarzane w tej karcie przeglądarki. Convertr nie otrzymuje ani nie przechowuje ich; zamknięcie lub ponowne załadowanie strony czyści stan roboczy, chyba że narzędzie wyraźnie oferuje lokalne pobranie.
Jak używać tego narzędzia
- Podaj typ gradientu, punkty kolorów, pozycje, kąt i ustawienia powtarzania w kontrolkach narzędzia.
- Wybierz ustawienia, które wpływają na podgląd na żywo i kopiowalną deklarację tła CSS, a następnie uruchom narzędzie.
- Przejrzyj podgląd na żywo i kopiowalną deklarację tła CSS przed skopiowaniem lub pobraniem.
Typowe tryby awarii
Brakujący przystanek koloru, nieprawidłowy kolor lub niezgodna pozycja uniemożliwiają zbudowanie prawidłowej deklaracji CSS.
Przydatny przykład
Utwórz gradient liniowy 90 stopni od #111827 przy 0% do #f59e0b przy 100% i skopiuj deklarację.