Generator cieni CSS
Twórz cienie CSS
Jak używać Generator cieni CSS
Twórz cienie CSS Darmowe narzędzie online, bez rejestracji, bez nachalnych reklam. Użyj teraz.
Gdzie stosuje się cień CSS?
Cienie dodają głębi, uniesienia i wizualnej hierarchii interfejsowi. Material Design od Google, Human Interface Guidelines Apple i większość nowoczesnych systemów projektowania systematycznie używa cieni do przekazywania, które elementy są "bliżej" użytkownika — tworząc trójwymiarowość w płaskich interfejsach.
- Uniesienie kart: Delikatny cień na kartach unosi je nad tłem, wskazując interaktywność i niezależność jako jednostki treści.
- Cienie modali i dropdownów: Nakładki używają silnych cieni, żeby pokazać że "unoszą się" nad treścią strony — tworząc wyraźną hierarchię głębokości.
- Wskaźniki focusu: box-shadow może zastąpić outline dla stanu focusu:
box-shadow: 0 0 0 3px rgba(0,112,243,0.4)tworzy widoczny pierścień focusu bez wpływu na layout. - Czytelność tekstu: Delikatny text-shadow na białym tekście nad obrazem zapewnia czytelność niezależnie od zawartości tła — bez nieprzezroczystych nakładek kolorowych.
- Neumorfizm: Projekt neumorficzny używa dwóch cieni (jasny z jednej strony, ciemny z drugiej) do tworzenia efektu 3D, jakby element wystawał z lub był wciśnięty w tło.
Składnia box-shadow: box-shadow: [inset] offset-x offset-y blur spread color. Można nakładać wiele cieni: box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 8px 16px rgba(0,0,0,.05) — technika wielowarstwowych naturalnych cieni z Material Design.
Jaka jest różnica między box-shadow a drop-shadow()?
box-shadow stosuje się do prostokątnego boksu elementu. Nie podąża za nieregularnymi kształtami — np. PNG z przezroczystym tłem. Filtr CSS drop-shadow() podąża za faktycznie renderowanym kształtem, włącznie z przezroczystymi obszarami. Używaj drop-shadow() dla ikon i obrazów z przezroczystością; box-shadow — dla kart, przycisków i prostokątnych elementów.
Co robi słowo kluczowe inset?
inset sprawia, że cień jest wewnętrzny — emanuje od wewnątrz elementu, a nie z zewnątrz. Wewnętrzny cień tworzy efekt wciśniętego lub wgłębionego elementu — przydatne dla wciśniętych przycisków, pól input (efekt głębokości) i UI neumorficznego.
Co to jest spread radius w box-shadow?
Czwarty parametr to promień rozproszenia. Powiększa lub zmniejsza cień. Wartość dodatnia sprawia, że cień jest większy niż element; ujemna — mniejszy. Przy offset-x=0 i offset-y=0 z dodatnim spread otrzymujesz równomierny kontur/blask wokół elementu.
Dlaczego cień wygląda inaczej w Safari i Chrome?
Różnice w renderowaniu cieni między przeglądarkami wynikają zazwyczaj z różnic w renderowaniu subpikselowym i korekcji gamma. Safari i Chrome używają nieco różnych algorytmów kompozytowania. Dla spójnych wyników używaj kolorów RGBA z jawnymi wartościami kanału alfa i testuj w obu.
Ile cieni można nałożyć?
Nie ma ścisłego limitu. Wiele box-shadow można nałożyć po przecinku. Kilka cieni z różnymi promieniami rozmycia i krycia wygląda bardziej naturalnie, naśladując rzeczywiste oświetlenie. Material Design definiuje konkretne receptury wielowarstwowych cieni dla każdego poziomu uniesienia.
CSS box-shadow vs outline vs border vs filter: drop-shadow()
box-shadow dodaje cień na zewnątrz (lub inset wewnątrz) elementu bez wpływu na layout. outline rysuje linię poza obramowaniem — często jako wskaźnik focusu. border dodaje linię wewnątrz elementu, wpływając na layout. filter: drop-shadow() podąża za faktycznie renderowanym kształtem. Do uniesienia UI: box-shadow; do pierścienia focusu: outline lub box-shadow; do cieni ikon: drop-shadow().