Generator Box Shadow
Darmowy generator box-shadow CSS online, podgląd 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.