Skomponuj właściwość box-shadow w CSS

Narzędzie Generator cieni przydaje się projektantom i programistom front-end, gdy chcą dopracować interfejs przed wdrożeniem. Skomponuj właściwość box-shadow w CSS.

Skomponuj właściwość box-shadow w CSS. Narzędzie jest bezpłatne w przeglądarce i pokazuje wynik bez konieczności tworzenia konta.

Jak używać

  1. Wprowadź przesunięcie poziome i pionowe cienia, a następnie wartości rozmycia i rozprzestrzenienia.
  2. Podaj kolor w formacie szesnastkowym, używając sześciu cyfr poprzedzonych znakiem hash.
  3. Kliknij przycisk generowania, aby uzyskać kompletną właściwość box-shadow.
  4. Skopiuj utworzoną regułę i wklej ją do arkusza stylów, aby ją zastosować.
  5. Dostosuj wartości, jeśli wyświetlanie nie odpowiada pożądanemu efektowi.

Przykład

Przykładowe dane wejściowe opisują przesunięty cień z rozmyciem i ciemnym kolorem. Po wygenerowaniu wynik pokazuje odpowiednią właściwość box-shadow. Możesz zmieniać jedną wartość naraz, aby zobaczyć, jak każde ustawienie wpływa na cień.

Dane wejściowe

2
2
8
1
#000000

Wynik

box-shadow: 2px 2px 8px 1px #000000;

Ograniczenia i formaty

Gdzie odbywa się przetwarzanie

Wszystko odbywa się w Twojej przeglądarce. Wprowadzone ustawienia pozostają na Twoim urządzeniu i nie są przesyłane ani przechowywane. Właściwość CSS jest składana lokalnie, bez połączenia zewnętrznego.

Częste pytania

Jakich jednostek powinienem użyć dla przesunięć i rozmycia?

Wartości są zwykle bez jednostek dla przesunięć i rozmycia, ponieważ reprezentują piksele. Możesz także dodać jednostkę taką jak px lub rem. Zachowaj tę samą logikę dla wszystkich wartości.

Czy mogę użyć przezroczystego koloru?

Pole oczekuje koloru w formacie szesnastkowym. Aby uzyskać przezroczysty cień, możesz użyć koloru z kanałem alfa, jeśli format na to pozwala, ale najprościej jest wybrać jednolity kolor i dostosować przezroczystość w CSS.

Dlaczego mój cień nie jest widoczny?

Sprawdź, czy właściwość jest zastosowana do elementu o widocznym rozmiarze. Zbyt mała wartość rozmycia lub rozprzestrzenienia może sprawić, że cień będzie niewidoczny. Upewnij się również, że kolor nie jest identyczny z tłem.

Czy przesunięcia mogą być ujemne?

Tak, przesunięcia w poziomie i w pionie mogą być ujemne. Wartości rozmycia i rozszerzenia muszą być liczbowe, a kolor musi być poprawnym kodem szesnastkowym z sześcioma cyframi poprzedzonymi znakiem hash. Narzędzie nie pokazuje podglądu cienia na elemencie, tworzy tylko gotową właściwość CSS. Po skopiowaniu reguły sprawdź jej działanie w swoim arkuszu stylów i dostosuj wartości, jeśli efekt nie odpowiada oczekiwaniom.

Jak upewnić się, że kolor cienia jest zaakceptowany?

Kolor należy podać w formacie szesnastkowym, używając sześciu cyfr poprzedzonych znakiem hash. Nieprawidłowy kolor uniemożliwia wygenerowanie właściwości. Jeśli chcesz uzyskać efekt przezroczystości, najprościej wybierz kolor stały, a przezroczystość dostosuj później w swoim CSS. Pamiętaj, że końcowe renderowanie zależy od przeglądarki i kontekstu elementu, więc po wklejeniu reguły sprawdź wygląd na stronie.

Narzędzia w tej samej kategorii