Generator box-shadow CSS - warstwy, presety, inset i systemy głębi

Narzędzie generuje wielowarstwowe cienie dla dowolnych elementów w CSS. Ustawisz przesunięcia, rozmycie, spread, kolor, krycie i flagę inset. Otrzymasz czysty kod z opcją legacy prefixów oraz podglądem na żywo. Dodatkowo znajdziesz tu praktyczne receptury, systemy głębi i triki, które przyspieszą pracę w przyszłych projektach.

Jak działa Generator box-shadow CSS

Silnik składa wartość box-shadow z listy warstw oddzielonych przecinkami. Każda warstwa ma formę [inset] offset-x offset-y blur spread color. Kolor zapisywany jest jako rgba(), aby zachować kontrolę nad kryciem. Dla pełnej kompatybilności możesz włączyć legacy, co dodaje linie -webkit-box-shadow i -moz-box-shadow.

Parametry i wpływ na efekt

Presety i zastosowania

Przykłady gotowego kodu

1. Miękki cień do kart

.card-soft {
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 3px 6px 0 rgba(0,0,0,.20),
    0 10px 20px 0 rgba(0,0,0,.15);
}
  

2. Kontrastowy cień do przycisków

.btn-hard {
  border-radius: 12px;
  box-shadow:
    0 6px 10px 0 rgba(0,0,0,.35),
    0 2px 4px 0 rgba(0,0,0,.20);
}
  

3. Wewnętrzny cień pola

.input-inset {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.25);
}
  

4. Elevation system oparty na zmiennych

:root{
  --e1: 0 1px 2px rgba(0,0,0,.10);
  --e2: 0 2px 6px rgba(0,0,0,.14);
  --e3: 0 6px 16px rgba(0,0,0,.16);
  --e4: 0 10px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
}
.e-1{ box-shadow: var(--e1); }
.e-2{ box-shadow: var(--e2); }
.e-3{ box-shadow: var(--e3); }
.e-4{ box-shadow: var(--e4); }
  

Strategie dojrzałego cieniowania

• Warstwa kontaktu - krótki cień o małym blur blisko elementu symuluje kontakt z powierzchnią.
• Warstwa rozproszona - druga warstwa o większym blur buduje wrażenie dystansu od tła.
• Kontrast a tło - na jasnym tle używaj szarości z alfa 10–22, na ciemnym zwiększ alfa lub zastosuj jasny cień
• Spójność projektu - zdefiniuj 3–5 poziomów elevation i używaj ich konsekwentnie.
• Ostrożnie ze spread - duże wartości szybko wyglądają sztucznie. Częściej wystarczy blur.

Wydajność i dostępność

Box-shadow renderuje się w kompozytorze. Pojedyncze warstwy są tanie, ale duże rozmycia na wielu elementach mogą obciążyć słabsze urządzenia. Unikaj animowania wysokich wartości blur. Jeśli efekt jest czysto dekoracyjny, nie stosuj go w długich listach scrollowanych. Dla klikalnych elementów zachowaj wyraźny focus ring niezależny od cienia.

Receptury na przyszłość

Neumorphism soft z podwójną parą cieni

.neu {
  background: #e9eef6;
  border-radius: 20px;
  box-shadow:
    10px 10px 20px rgba(0,0,0,.12),
    -10px -10px 20px rgba(255,255,255,.85);
}
  

Karta z ringiem focus i cieniem bazowym

.card-focus {
  border-radius: 16px; background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.card-focus:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.35),
    0 8px 20px rgba(0,0,0,.18);
}
  

Wewnętrzna poświata jako miękki obrys

.inner-glow {
  background: #111827; border-radius: 14px;
  box-shadow: inset 0 0 12px 4px rgba(59,130,246,.25);
}
  

Flat card z delikatnym rozmyciem

.card-flat { box-shadow: 0 1px 4px rgba(0,0,0,.12); }
  

Shadow na hover w systemie elevation

.tile { box-shadow: var(--e2); transition: box-shadow .18s ease, transform .18s ease; }
.tile:hover { box-shadow: var(--e3); transform: translateY(-2px); }
.tile:active { box-shadow: var(--e2); transform: translateY(0); }
  

Mix box-shadow z innymi technikami

.icon { filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)); }
      

.card-multi { position: relative; }
.card-multi::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
      

Dobór kolorów cienia

Najbardziej naturalne są neutralne szarości z niskim alfa. Dla brandowych akcentów możesz lekko zabarwić cień kolorem przewodnim. Unikaj czystej czerni 0,0,0 przy alfa 1. W UI produkcyjnych najlepiej sprawdza się zakres 0.10–0.25.

• Na tle jasnym: rgba(0,0,0,.12) do rgba(0,0,0,.20).
• Na tle ciemnym: rgba(0,0,0,.30) do rgba(0,0,0,.45) lub jasny cień rgba(255,255,255,.12).
• Dla neonów i kart promocyjnych dodaj lekki tint kolorem brandu.

Diagnostyka i szybkie poprawki

• Brudny obrys - zmniejsz spread do 0 i zwiększ delikatnie blur.
• Efekt unoszenia zbyt mocny - obniż y oraz blur górnej warstwy.
• Płaski wygląd - dodaj krótką warstwę kontaktową 0 1px 2px.
• Kartka zbyt ciemna - zmniejsz alfa z 0.22 do około 0.16 i podbij tło kart do jaśniejszego odcienia.

Jak wpiąć wygenerowany CSS

1. Dodaj klasę docelową elementowi, np. .card lub .panel.
2. Kliknij Generate i skopiuj wartość z panelu CSS.
3. Wklej do arkusza stylów. Jeśli projekt wspiera zmienne, przenieś powtarzalne cienie do :root.
4. Zweryfikuj efekt na różnych tłach i w ciemnym motywie. W razie potrzeby przygotuj alternatywne zestawy cieni.

Checklist wdrożeniowy

• Skala elevation ma maksymalnie 5 poziomów i jest spójna w całym projekcie.
• Focus ring nie ginie w cieniu i jest widoczny na klawiaturze.
• Nie animujesz dużych wartości blur na wielu elementach naraz.
• Spread używany oszczędnie. Główna praca leży w blur i y.

Podsumowanie

Generator box-shadow CSS pozwala szybko i przewidywalnie tworzyć cienie o jakości produkcyjnej. Zamiast ręcznie komponować wartości, układasz warstwy, wybierasz preset i kopiujesz wynik. Używaj systemu elevation, kontroluj kontrast i testuj na docelowych tłach. Dzięki temu UI wygląda profesjonalnie, zachowuje czytelność i działa płynnie.