Generator cieni box-shadow
Połącz kilka delikatnych warstw, aby cień wyglądał naturalnie, a potem skopiuj CSS.
Zapieczętowane na tym urządzeniu
Działa w przeglądarce. Nic nie jest wysyłane.
Zapieczętowane
Podgląd
Warstwy cienia
Na razie brak cienia. Dodaj warstwę, aby zacząć.
Kod CSS
Jak to działa
-
Zacznij od szablonu
Wybierz cień miękki, warstwowy, unoszący, ostry lub wewnętrzny jako punkt wyjścia.
-
Dopasuj warstwy
Ustaw przesunięcie, rozmycie, rozszerzenie, kolor i krycie każdej warstwy, a także dodawaj lub usuwaj warstwy. Podgląd aktualizuje się na bieżąco.
-
Skopiuj CSS
Skopiuj deklarację box-shadow i wklej ją do swojego arkusza stylów.
Najczęściej zadawane pytania
Do czego służą rozmycie i rozszerzenie?
Rozmycie zmiękcza krawędź cienia: im wyższa wartość, tym bardziej jest rozproszony. Rozszerzenie powiększa lub zmniejsza cień przed zastosowaniem rozmycia. Ujemne rozszerzenie z dużym rozmyciem daje miękki efekt uniesienia, popularny w nowoczesnych interfejsach.
Po co kilka warstw cienia?
Prawdziwe cienie mają ciemny, zwarty rdzeń blisko obiektu i miękką, szeroką poświatę dalej od niego. Połączenie małej, ostrej warstwy z jedną lub dwiema większymi i jaśniejszymi odtwarza ten efekt i wygląda znacznie naturalniej niż pojedynczy cień.
Czym jest cień wewnętrzny (inset)?
Cień inset jest rysowany wewnątrz elementu, a nie na zewnątrz. Sprawia, że powierzchnia wygląda na wciśniętą, co dobrze sprawdza się w polach formularzy lub wciśniętych przyciskach.
Czy cień zadziała we wszystkich przeglądarkach?
Tak. box-shadow, wiele warstw i składnia kolorów rgb() użyta w kodzie są obsługiwane przez wszystkie aktualne przeglądarki.
Czy box-shadow spowalnia stronę?
Statyczne cienie są tanie w rysowaniu. Bardzo duże rozmycia na wielu elementach albo animowanie samego cienia mogą kosztować więcej. Aby płynnie animować cień, zmieniaj zamiast tego krycie pseudoelementu, który go nosi.