Generator cienia elementów
Bezpłatny online generator CSS cienia elementów, prezentacja w czasie rzeczywistym
Składnia CSS box-shadow
Właściwość CSS box-shadow dodaje efekty cienia wokół elementu. Składnia: box-shadow: [inset] offset-x offset-y blur spread color. Wiele cieni może być oddzielonych przecinkami. Używaj edytora wizualnego do dostosowywania wartości i widoku wyniku w czasie rzeczywistym.
Jak używać generatora cienia
Dostosuj suwaki dla przesunięcia X, przesunięcia Y, promienia rozmycia i promienia rozszerzenia. Wybierz kolor cienia i przełącz opcję inset. Generowany kod CSS aktualizuje się w czasie rzeczywistym i może być skopiowany do schowka.
▶Jaka jest różnica między rozmyciem a rozszerzeniem?
Rozmycie kontroluje, jak miękkie są krawędzie cienia (0 = ostra krawędź, wyższe wartości = miększe). Rozszerzenie powiększa lub pomniejsza cień we wszystkich kierunkach. Dodatnie rozszerzenie czyni cień większym niż element.
▶Czy mogę dodać wiele cieni?
Tak, CSS obsługuje wiele cieni oddzielonych przecinkami: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);. Łącz subtelne cenie dla bardziej realistycznego efektu głębi.
▶Co robi cień inset?
Cień inset pojawia się wewnątrz elementu zamiast na zewnątrz. Tworzy wrażenie, że element jest wciskany do wewnątrz, jak pole tekstowe lub wklęśnięcie przycisku.
Jeśli ten tool był dla ciebie przydatny, pomyśl o tym, aby kupić mi kawę.
Kup mi kawę.