Jak używać
- Ustaw „Przesunięcie poziome” i „Przesunięcie pionowe”, aby określić położenie cienia.
- Dopasuj „Rozmycie” i „Rozciągnięcie”, obserwując zmiany w podglądzie.
- Wybierz „Kolor” i ustaw „Krycie” cienia.
- Kliknij „Kopiuj CSS”, aby skopiować całą deklarację box-shadow, albo „Kopiuj wartość”, aby skopiować samą wartość bez „box-shadow:” i średnika. Skrót Ctrl+Shift+C (Cmd+Shift+C na Macu) też działa, gdy żaden tekst nie jest zaznaczony.
Przykłady
Niebieski cień karty produktu
Dane wejściowe
Przesunięcie poziome: 0; Przesunięcie pionowe: 8; Rozmycie: 24; Rozciągnięcie: 0; Kolor: #2451E8; Krycie: 0.35
Wynik
box-shadow: 0 8px 24px 0 rgba(36, 81, 232, 0.35);
Dwuwarstwowy cień panelu
Dane wejściowe
Warstwa 1: Przesunięcie poziome: 0; Przesunięcie pionowe: 2; Rozmycie: 4; Rozciągnięcie: -2; Kolor: #000000; Krycie: 0.1 Warstwa 2: Przesunięcie poziome: 0; Przesunięcie pionowe: 4; Rozmycie: 6; Rozciągnięcie: -1; Kolor: #000000; Krycie: 0.1
Wynik
box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
Wciśnięty przycisk
Dane wejściowe
Przesunięcie poziome: 0; Przesunięcie pionowe: 2; Rozmycie: 4; Rozciągnięcie: 0; Kolor: #000000; Krycie: 0.25; Wewnętrzny (inset): włączony
Wynik
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.25);
Wskazówki
- Kolor cienia wybierzesz w narzędziu Kody kolorów HTML.
- Połącz z tłem gradientowym z narzędzia Generator gradientów CSS.
FAQ
Ile cieni box-shadow mogę nałożyć na jeden element?
Możesz ustawić od 1 do 4 warstw. Pierwsza jest rysowana na wierzchu; zmienisz kolejność przyciskami „↑ W górę” i „↓ W dół”.
Czy zaokrąglenie i tło podglądu trafiają do kodu CSS?
„Kolor elementu”, „Tło” i „Zaokrąglenie” zmieniają tylko wygląd podglądu. Nie są częścią wygenerowanej deklaracji box-shadow.
Dlaczego podgląd nie zmienia się po wpisaniu wartości?
Przy błędnej wartości podgląd i kod zachowują ostatni poprawny cień. Wpisuj całkowite liczby pikseli: od −200 do 200 dla przesunięć i rozciągnięcia oraz od 0 do 300 dla rozmycia.
Czy mogę podać kolor w formacie HEX z przezroczystością?
Pole „Kolor” przyjmuje #RGB lub #RRGGBB, także bez znaku #. Zapis z kanałem alfa, np. #RRGGBBAA, nie jest obsługiwany; przezroczystość ustaw w polu „Krycie”.
Czy ustawienia cienia zostaną zapisane?
Warstwy i ustawienia podglądu są zapisywane w localStorage przeglądarki i przywracane przy następnej wizycie. „Resetuj” usuwa zapis i przywraca ustawienia domyślne.