CSS Box-Shadow Generator

Czym jest CSS box-shadow?

Właściwość CSS box-shadow dodaje jeden lub więcej cieni do elementu. Cienie tworzą głębię i wydobywają elementy takie jak karty, przyciski i okna dialogowe z tła.

Składnia box-shadow

Składnia to: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X i Offset-Y określają pozycję cienia. Promień rozmycia kontroluje miękkość, promień rozszerzenia powiększa lub zmniejsza cień.

Wskazówki dotyczące dobrych cieni

• Użyj wielu cieni o różnych wartościach rozmycia dla bardziej realistycznych efektów.
• Zachowaj subtelne kolory cieni — używaj przezroczystych czerni zamiast mocnych kolorów.
• Cienie inset świetnie sprawdzają się przy wciśniętych przyciskach i polach wprowadzania.
• Testuj cienie w trybie jasnym i ciemnym, ponieważ mogą wyglądać inaczej.