Buduj wizualnie i kopiuj gotowy kod CSS
Generator gradientów i cieni. Tworzysz je wizualnie za pomocą suwaków, widzisz wynik w czasie rzeczywistym i kopiujesz gotowy CSS. W gradiencie wybierasz dwa kolory oraz kąt od 0 do 360 stopni, a wynikiem jest kod linear-gradient. W przypadku cienia dostosowujesz przesunięcie w dół, rozmycie, rozproszenie, intensywność, kolor i zaokrąglenie rogów. Efekt widzisz na przykładowej karcie. Cztery gotowe ustawienia (delikatny, normalny, wyraźny i unoszący się) dają dobry punkt wyjścia. Skopiowany kod cienia zawiera również border-radius. Narzędzie jest przydatne do przycisków, kart i sekcji powitalnej, a także do precyzyjnego opisywania wyglądu narzędziom AI.
W tle sekcji powitalnej, na ważnych przyciskach lub wyróżnionych kartach. Nie stosuj go na całej stronie, ponieważ męczy to wzrok.
Prawdopodobnie intensywność jest zbyt wysoka. Dobry cień to taki, którego prawie nie widać. Spróbuj ustawić intensywność na 10 do 20 procent lub użyj jednego z gotowych ustawień.
Nie w tym narzędziu, dostępne są tylko kolory początkowy i końcowy. Środkowy kolor można dodać ręcznie w kodzie, pomiędzy dwoma kolorami wewnątrz funkcji linear-gradient.
Przesunięcie poziome jest na stałe ustawione na 0. Dzięki temu cień pada prosto w dół, imitując oświetlenie z góry. Jest to standardowy wygląd w interfejsach.
Ujemne rozproszenie zmniejsza cień przed jego rozmyciem. Sprawia to, że cień wystaje tylko spod karty, a nie ze wszystkich stron. Trzy z czterech gotowych ustawień wykorzystują ten efekt.
Nie udało się wczytać Klix
Najpierw spróbuj odświeżyć stronę. Jeśli właśnie pojawiła się nowa wersja, odświeżenie od razu pomaga.
Jeśli odświeżenie nie pomogło, Twoja przeglądarka może być zbyt stara. Klix uruchamia narzędzia na Twoim urządzeniu, a nie na serwerze, więc potrzebuje przeglądarki z 2022 roku lub nowszej. Co zrobić: zaktualizuj Chrome lub Firefox i otwórz ponownie klixtools.com.