Generator cieni pudełkowych

Projektuj warstwowe cienie pudełkowe z przesunięciem, rozmyciem, rozproszeniem i kolorem. Wyświetl podgląd na karcie, a następnie skopiuj CSS jednym kliknięciem.

Box Shadow Generator

Live
Preview card

CSS output

box-shadow: 8px 16px 32px -4px rgba(192, 38, 211, 0.35);
border-radius: 24px;

Key capabilities

  • Projektuj warstwowe cienie pudełkowe z przesunięciem, rozmyciem, rozłożeniem i kolorem — wliczony podgląd na żywo.
  • Działa w Twojej przeglądarce
  • Bezpłatne

Jak używać

  1. Dostosuj przesunięcie, rozmycie i rozproszenie.
  2. Wybierz kolor i krycie (lub dodaj warstwy).
  3. Skopiuj CSS box-shadow.

How this tool works

  1. Dostosuj przesunięcie, rozmycie i rozproszenie.
  2. Wybierz kolor i krycie (lub dodaj warstwy).
  3. Skopiuj CSS box-shadow.

Recommended settings

  • Najpierw użyj opcji domyślnych, a następnie dostosuj je w razie potrzeby

Supported formats

Text / on-page input

File size and limits

  • Bardzo złożone wielowarstwowe podglądy mogą działać wolniej na starszych telefonach.

Privacy

Generatory kolorów i CSS działają całkowicie w przeglądarce. Podglądy i konwersje nigdy nie przesyłają Twoich stylów.

Common use cases

  • Korzystaj z generatora cieni pudełkowych, kiedy tylko potrzebujesz: projektuj warstwowe cienie pudełkowe z przesunięciem, rozmyciem, rozproszeniem i kolorem — wliczony podgląd na żywo.

Troubleshooting

Podgląd wygląda inaczej po wklejeniu

Sprawdź, czy na Twojej stronie nie ma konkurencyjnych CSS (resetowanie, dziedziczone kolory). Najpierw skopiuj wygenerowaną regułę do izolowanego arkusza stylów.

FAQ

Czy to przesyła mój CSS?

Nie. Generatory i konwertery działają w Twojej przeglądarce z podglądem na żywo.

Czy potrzebuję konta?

Nie. Otwórz narzędzie, dostosuj elementy sterujące i skopiuj CSS.

Powiązane narzędzia