Projektowanie

Generator cieni CSS

Projektuj cienie pudełek wizualnie.

Jak używać

Zacznij od ustawienia wstępnego lub jednej warstwy, a następnie dodaj warstwy dla głębi. Przełącz wcięcie, aby uzyskać efekty wciśnięte/neumorficzne. Skopiuj wartość oddzieloną przecinkami do właściwości box-shadow.

FAQ

Czy mogę nakładać kilka cieni?

Tak — dodaj warstwy, aby połączyć miękki cień otoczenia z wyraźnym cieniem kontaktowym, lub nałóż kolorowe poświaty. Każda warstwa ma własne przesunięcie, rozmycie, rozciągnięcie, kolor i przełącznik inset.

Co robią ustawienia wstępne?

Punkty startowe na jedno kliknięcie: głębia karty w stylu Stripe, wypukły lub wklęsły neumorfizm, głębia Material i delikatna poświata — po zastosowaniu dostosuj suwaki.

Jak użyć wyniku?

Skopiuj wiersz box-shadow do swojego CSS. Wiele warstw jest oddzielonych przecinkami, dokładnie tak, jak oczekują przeglądarki.

Ostatnia aktualizacja: