MoaKit
All tools

Box Shadow Generator

Stack multiple shadow layers for natural CSS box-shadows, with presets like neumorphism and brutalism plus a Tailwind class.

프리셋

그림자 층 3개

px
px
px
px
%

그림자는 여러 겹을 옅게 쌓을수록 실제 빛처럼 자연스러워요. 색은 검정보다 배경과 어울리는 짙은 색이 좋아요.

What is Box Shadow Generator?

Lets you adjust the position, blur and color of a box-shadow while watching the result, and generates the CSS code.

How to use

  1. Adjust the horizontal and vertical position and the amount of blur.
  2. Choose the shadow color and opacity.
  3. Copy the CSS code.

Tips

  • A large blur with low opacity gives a soft shadow.
  • Layering several shadows looks much more natural.