Not one hard blur โ a stack of layers that falls off like real light. Drag the sun, copy the CSS.
โ๏ธ Drag anywhere to move the light source
Ask an AI for a shadow and you get box-shadow: 0 4px 20px rgba(0,0,0,0.3) โ one hard blur that reads as grey mud under the element. Real light doesn't work that way: a shadow is dense and tight near the object and wide and faint further out. Designers fake that by stacking several shadows with growing offset and blur and falling opacity. This generator builds that stack visually โ drag the light source and watch the shadow swing around the box in real time.
Layers โ how many shadows are stacked (3โ5 is the sweet spot). Distance โ how far the light pushes the shadow. Softness โ the blur spread of the outermost layer. Intensity โ total darkness. Falloff โ Natural ramps blur exponentially, the way light actually behaves; Linear spaces layers evenly for a flatter, more graphic look. Tint the shadow with your brand colour instead of black and it stops looking dirty on coloured backgrounds.
Grab clean, ready CSS or a Tailwind arbitrary-value class. Everything renders live in your browser โ nothing is uploaded, no account, no watermark on the code.
Related: Color Converter ยท RegEx Tester