Jak korzystać: Generator gradientów i cieni CSS
- 1
Wybierz gradient lub cień pola
Przełączaj się między edytorami za pomocą kart nad podglądem.
- 2
Zacznij od gotowego wzoru
Kliknij kafelek w sekcji Gotowe wzory, aby go wczytać, albo zostaw domyślne ustawienia i zmieniaj je od nich.
- 3
Dopasuj wszystko wizualnie
Przeciągaj punkty koloru i ustaw kąt albo dodawaj warstwy cienia i reguluj przesunięcie, rozmycie oraz rozszerzenie.
- 4
Skopiuj kod
Skopiuj deklarację CSS lub klasę Tailwind i wklej ją do swojego projektu.
Limity i Pro
Za darmo i bez rejestracji: bez limitu punktów koloru i warstw cienia, 3 typy gradientów, 3 przestrzenie mieszania kolorów i 24 gotowe wzory.
Plan Pro usuwa reklamy; oba edytory są kompletne w każdym planie. Zobacz Pro
O narzędziu: Generator gradientów i cieni CSS
Gradienty i cienie to dwa efekty CSS, które najczęściej poprawia się metodą prób i błędów w narzędziach deweloperskich przeglądarki. Ten generator daje każdemu z nich edytor wizualny z dużym podglądem na żywo, a potem zapisuje dokładną deklarację CSS oraz odpowiadającą jej klasę Tailwind z wartością dowolną, taką jak bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]. Wynik wklejasz prosto do arkusza stylów albo do atrybutu className.
Edytor gradientów tworzy gradienty liniowe, promieniowe i stożkowe. Kliknij pasek punktów, aby dodać kolor w wybranym miejscu, przeciągnij punkt, by go przesunąć, albo użyj strzałek, by ustawić pozycję precyzyjnie. Każdy punkt ma własne krycie. Gradienty liniowe i stożkowe mają kąt, promieniowe i stożkowe punkt środkowy, promieniowe dodatkowo kształt koła lub elipsy, a każdy z nich może się powtarzać, dzięki czemu zrobisz paski i pierścienie. Możesz też wybrać przestrzeń barw użytą do mieszania: OKLab i OKLCH unikają szarego, brudnego środka, który klasyczne mieszanie w sRGB daje między nasyconymi kolorami, i są obsługiwane przez wszystkie aktualne przeglądarki.
Edytor cienia pola układa tyle warstw, ile potrzebujesz. Każda warstwa ma przesunięcie X i Y, rozmycie, rozszerzenie, kolor z kryciem, przełącznik cienia wewnętrznego i przełącznik widoczności. Warstwy możesz zmieniać kolejnością, bo pierwsza jest rysowana na wierzchu. Pole podglądu z regulowanym rozmiarem, promieniem rogów i kolorami pokazuje efekt na jasnej lub ciemnej powierzchni.
Dwanaście gotowych wzorów dla każdego edytora – zachody słońca, koła barw i paski oraz wysokości Material, warstwowe miękkie cienie, neumorfizm i ostre przesunięcia – to dobry punkt wyjścia. Narzędzie obsługuje tylko gradienty i cienie pola; text-shadow, filter: drop-shadow i gradienty SVG nie są generowane.
Prywatność
Wszystko dzieje się na stronie: kolory i ustawienia nie opuszczają przeglądarki, a żaden obraz nie jest przesyłany na serwer. Bieżący gradient i cień zapisują się w pamięci lokalnej, więc po powrocie nadal tam będą.
Funkcje
Liniowy, promieniowy i stożkowy
Przeciągane punkty koloru z kryciem, kątem, środkiem, kształtem i trybem powtarzania.
Cienie wielowarstwowe
Układaj warstwy, zmieniaj ich kolejność, ukrywaj je i ustawiaj jako wewnętrzne, by uzyskać realistyczną głębię.
CSS i Tailwind
Skopiuj gotową deklarację lub klasę Tailwind z wartością dowolną.