Generator CSS box-shadow

Wygeneruj kod CSS z właściwością box-shadow, aby nadać wybranemu elementowi.

Ustaw parametry cienia


Poziomo: 0 Pionowo: 0 Siła rozmycia: 15 Rozmiar: 5 Kolor:

Wynik


...

Składnia

box-shadow: horizontal-offset vertical-offset blur spread color;

horizontal-offset *wymagana wartość
Pozycja cienia w poziomie. Wartości dodatnie ustawiają cień po prawej stronie elementu, natomiast ujemne po lewej.

vertical-offset *wymagana wartość
Pozycja cienia w pionie. Wartości dodatnie ustawiają cień poniżej elementu, natomiast ujemne powyżej.

blur
Rozmycie cienia. Im wyższa wartość tym większe rozmycie. Nie przyjmuje wartości ujemnych. Wartością domyślną jest 0, przy której cień jest ostry i nie posiada rozmycia.

spread
Rozmiar cienia. Domyślna wartość 0 ustala rozmiar cienia równy wielkości elementu. Wartości dodatnie powiększają rozmiar cienia, a ujemne go zmniejszają w stosunku do elementu.

color
Kolor cienia. Domyślnie w większości przeglądek przyjmuje kolor tekstu, natomiast w przeglądarce Safari cień jest domyślnie przezroczysty.


Za pomocą właściwości box-shadow można nadać elementowi dowolną ilość cieni, podając ich wartości po przecinku