Tools
Design CSS box shadows visually and copy the code.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);shadow-[5px_5px_15px_0px_rgba(0,0,0,0.25)]This Box Shadow Generator lets you design CSS shadows visually instead of guessing values by hand. Adjust X/Y offset, blur, spread, color and opacity with sliders, layer up to five shadows for depth, and preview the result against a customizable box shape and background. Start from a preset like Material or Soft Glow, then copy the finished shadow as CSS or a Tailwind arbitrary-value class.
Intuitive sliders for X/Y offset, blur, spread, and opacity.
Layer up to 5 shadows for complex depth effects.
See your shadow update in real-time with customizable preview.
Copy standard CSS or Tailwind arbitrary value syntax.
Choose a preset like Subtle, Material or Soft Glow, or start from the default shadow and build your own.
Use the sliders to set X/Y offset, blur radius, spread and opacity, and pick a color for the active shadow.
Add up to five shadows, reorder them, or toggle any layer to inset for a pressed-in look.
Change the preview box color, background color and shape (square, rounded, circle) to see the shadow in context.
Copy the finished box-shadow value as standard CSS, or as a Tailwind arbitrary-value class.
All shadow calculations run in your browser as you move the sliders. Nothing about the colors or values you choose is sent to a server.
Free online CSS gradient generator with live preview. Create beautiful linear, radial, and conic gradients. Customize colors, angles, and color stops. Copy CSS code with one click. No signup required.
Free online Pick One tool with live preview. Create stunning side-by-side A/B comparisons with customizable layouts, labels, backgrounds, and aspect ratios. Perfect for social media polls.
Developed by MadMVP
Book a call to build your vision into reality