Generator CSS Box Shadow i Border Radius

Generator CSS Box Shadow i Border Radius

🎨 Darmowy generator CSS box-shadow i border-radius z podglądem na żywo. Twórz piękne cienie, zaokrąglone rogi oraz nowoczesne efekty UI. Gotowy kod do skopiowania w projektach WWW.

Właściwość Box Shadow

Właściwość CSS box-shadow dodaje efekty cienia wokół ramki elementu. Możesz ustawić wiele efektów rozdzielonych przecinkami. Cień opisują przesunięcia X i Y względem elementu, promień rozmycia i rozpiętości oraz kolor.

Składnia: box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

Parametry cienia

• Przesunięcie X (poziome): dodatnie wartości przesuwają cień w prawo, ujemne w lewo
• Przesunięcie Y (pionowe): dodatnie wartości przesuwają cień w dół, ujemne w górę
• Promień rozmycia: większe wartości dają większe rozmycie. 0 oznacza ostry cień
• Promień rozpiętości: dodatnie wartości powiększają cień, ujemne go zmniejszają
• Kolor: dowolna wartość koloru CSS (hex, rgb, rgba, hsl)
• Inset: zmienia cień na wewnętrzny zamiast zewnętrznego

Właściwość Border Radius

Właściwość border-radius zaokrągla rogi zewnętrznej krawędzi obramowania elementu. Możesz ustawić jeden promień, aby uzyskać kołowe rogi, albo dwa promienie, aby uzyskać rogi eliptyczne.

Składnia: border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

Typowe zastosowania

• Karty: delikatny cień (0 4px 6px rgba(0,0,0,0.1)) + średni radius (8px)
• Przyciski: kolorowy cień dopasowany do koloru przycisku dla efektu głębi
• Modale: duży cień (0 20px 25px rgba(0,0,0,0.15)) aby wyglądały jak „unoszące się”
• Obrazy: okrągłe awatary (border-radius: 50%) lub zaokrąglone miniatury (8–16px)
• Pola input: cień wewnętrzny dla stanu wciśnięcia/skupienia
• Neumorfizm: wiele cieni (jasny i ciemny) dopasowanych do tła

Dobre praktyki dla cieni

• Używaj subtelnych cieni: zwykle wystarczy 10–20% krycia, aby uzyskać głębię
• Y-offset > X-offset: imituje naturalne światło z góry
• Większe rozmycie dla „uniesienia”: większy blur = element wygląda na wyżej nad stroną
• Dopasuj kolor cienia: użyj koloru elementu z niskim kryciem dla spójności
• Wydajność: unikaj animowania box-shadow, używaj opacity lub transform

Popularne style cieni

• Material Design: 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM: 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD: 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG: 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap: 0 0.5rem 1rem rgba(0,0,0,0.15)

Wzorce Border Radius

• Brak (0px): ostre rogi, nowoczesny minimalistyczny wygląd
• Mały (4px): delikatne zaokrąglenie dla inputów, przycisków
• Średni (8px): standard dla kart i kontenerów
• Duży (16px+): przyjazny, „miękki” wygląd
• Pigułka (999px lub 50%): zaokrąglone końce dla tagów, plakietek
• Koło (50%): awatary, przyciski ikon (wymaga kwadratu)

Zaawansowane techniki

• Wiele cieni: łącz cienie dla efektów warstwowych
• Efekt poświaty: 0 0 20px [kolor] bez przesunięć
• Neumorfizm: jasny cień lewy-górny, ciemny cień prawy-dolny
• Focus ring: kolorowy cień dla dostępności (0 0 0 3px rgba(kolor,0.5))
• Efekt 3D: wiele cieni o rosnącym przesunięciu i rozmyciu

Wsparcie przeglądarek

Box-shadow i border-radius są wspierane we wszystkich nowoczesnych przeglądarkach. Dla IE8 i starszych używa się prefiksów (-webkit-box-shadow, -moz-box-shadow), ale dziś rzadko jest to potrzebne.

💡 Wskazówka: Dla efektów hover nie animuj bezpośrednio box-shadow, bo jest to kosztowne. Zamiast tego utwórz cień na pseudoelemencie (::before lub ::after) i animuj jego opacity. Daje to ten sam efekt wizualny przy dużo lepszej wydajności, szczególnie na urządzeniach mobilnych!