Obraz
100% w Twojej przeglądarce
Generator Box Shadow — Wizualne Narzędzie CSS box-shadow
Create CSS box-shadow effects visually. Adjust offset, blur, spread, color and opacity, stack multiple shadows, and copy the code. Live preview, 100% in your browser.
Kod CSS
Generator Box Shadow — Projektuj Cienie CSS Wizualnie
Twórz idealne efekty CSS box-shadow za pomocą wizualnego edytora na żywo. Przeciągaj suwaki, aby kontrolować przesunięcie, rozmycie, rozszerzenie i kolor, układaj wiele warstw cienia dla głębi, włączaj cienie wewnętrzne i kopiuj gotowy do użycia CSS. Koniec ze zgadywaniem wartości w pikselach.
Cztery wartości box-shadow
- Przesunięcie X: odległość pozioma — dodatnia przesuwa cień w prawo, ujemna w lewo
- Przesunięcie Y: odległość pionowa — dodatnia w dół, ujemna w górę
- Rozmycie: jak miękka jest krawędź cienia (0 = ostra, wysoka = bardzo miękka)
- Rozszerzenie: powiększa (dodatnie) lub zmniejsza (ujemne) rozmiar cienia
Funkcje
- Podgląd na żywo: zobacz cień na przykładowym elemencie natychmiast
- Kolor + przezroczystość: wybierz dowolny kolor i dostrój przezroczystość
- Cienie wewnętrzne: twórz wewnętrzne cienie dla efektów wciśnięcia
- Wiele warstw: układaj kilka cieni dla realistycznej głębi
- Czysty output CSS: skopiuj pojedynczą właściwość gotową do wklejenia
Wskazówki dla realistycznych cieni
- Prawdziwe cienie są zwykle miękkie — użyj hojnego rozmycia i niskiej przezroczystości (10–25%)
- Nakładaj dwa lub trzy cienie (jeden wąski ciemny + jeden szeroki miękki) dla naturalnej głębi
- Zachowaj spójny kierunek światła w całym interfejsie
- Subtelność jest lepsza — ciężkie cienie wyglądają przestarzale
Prywatność
To narzędzie działa całkowicie w Twojej przeglądarce. Nic nie jest przesyłane ani przechowywane.