Free CSS Box Shadow Generator
Design CSS box shadows visually: horizontal and vertical offsets, blur radius, spread, and color — then toggle inset for inner shadows. The live preview updates instantly and the CSS output — e.g. box-shadow: 4px 6px 12px rgba(0,0,0,0.4); — is ready to copy into any stylesheet. Six presets (soft, sharp, glow, inset, floating, neon) give you starting points in one click.
Understanding the values
offset-x shifts the shadow horizontally, offset-y vertically (positive = down). blur softens the edge; larger values spread the shadow out and fade it. spread expands or contracts the shadow size without blurring. The inset keyword draws the shadow inside the element instead. Alpha colors (like rgba or 8-digit hex) render soft, realistic shadows.
Box Shadow FAQ
What's a common "shadow that works"? Start with 0 4px 12px rgba(0,0,0,0.15) — subtle enough for cards. Can shadows go on all sides? Negative offsets drag the shadow up/left; zero offsets with blur produce a symmetric halo. Is my design sent anywhere? No — everything runs locally in your browser.