Box Shadow CSS Generator

Dial in offset, blur, spread and color with a live preview, then copy production-ready box-shadow code as CSS, SwiftUI or Tailwind in one tap.

Build the exact CSS box-shadow you have in your head — no guessing, no refresh loop. Drag offset, blur, spread, color and opacity, watch a real element update live, then copy clean code in one tap.

Most shadow tools are browser pages that give you a single flat shadow. This one is a native iOS studio built around how depth actually works: stack up to six shadow layers, flip any layer to inset, preview on a light or dark canvas, and export the same result as CSS, SwiftUI or a Tailwind arbitrary-value utility. Everything runs on device, so it works on a plane, on the couch, or in a meeting.

WHAT YOU GET

• A live preview element that renders your shadow exactly as the browser will, on a light or dark canvas
• Precise sliders for offset X, offset Y, blur radius, spread and opacity, plus a color wheel and hex field
• Up to six stacked layers you can reorder, mute individually or delete for believable, multi-source depth
• Inset shadows for pressed buttons, wells and neumorphic surfaces
• One-tap copy in three flavors: CSS box-shadow, chained SwiftUI .shadow modifiers, or a Tailwind shadow-[...] utility
• Twelve curated presets across Material elevation, soft cards, long shadows, glows, neumorphism and inset — plus your own saved library

PERFECT FOR

• Front-end developers who want valid box-shadow code without opening a codepen
• UI and product designers translating a mockup shadow into real values
• SwiftUI developers who need the iOS equivalent of a web shadow
• Students and self-taught devs learning what blur, spread and inset actually do

WHY NOT JUST USE A FREE WEB GENERATOR? Because web generators give you one layer, no inset, no SwiftUI or Tailwind output, and nowhere to keep the shadow you liked last week. Here you stack layers, save them by name, and pull them back up months later — offline, on the device that is already in your hand.

PRIVACY No account, no sign-up, no ads, no analytics on your work. Every shadow, preset and saved item lives only on your device. Nothing you design is uploaded anywhere.

FULL ACCESS Full Access unlocks multi-layer shadows (up to six), the inset toggle, SwiftUI and Tailwind export, every premium preset, and an unlimited saved library. It is available as a weekly subscription, a yearly subscription, or a one-time lifetime purchase. The free version keeps single-layer editing and CSS copy.

Open the Create tab, drag the blur slider until the card lifts off the page, and tap Copy CSS.

Terms of Use (EULA): https://web-levi.web.app/terms Privacy Policy: https://web-levi.web.app/privacy-policy Questions? Contact tphuc.work@gmail.com