Box Shadow Generator for Elementor

Welcome to the easiest way to design, preview, and apply box shadows specifically for your Elementor projects. Whether you are building a sleek modern card, a floating button, or a deep inset section, this tool helps you visualize the perfect shadow.

Settings

0
10
20
0
0.15

Preview Settings

Elementor UI Values

Enter these exact values into the Elementor Box Shadow control panel.

Color (RGBA)rgba(0,0,0,0.15)
PositionOutline
Horizontal0
Vertical10
Blur20
Spread0

CSS Code

box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15);

Why use this Box Shadow Generator?

While Elementor has a great built-in shadow UI, tweaking values back and forth directly on your live page can be slow and frustrating. This generator provides a smooth, real-time sandbox environment where you can:

  • Design Without Lag: Instantly see how your horizontal and vertical offsets, blur radius, spread, and opacity interact with each other in real-time.
  • Elementor-Ready Values: No more guessing or converting hex codes to RGBA in your head. Our tool spits out the exact values (Color, Position, X, Y, Blur, Spread) required for the Elementor UI fields.
  • Custom Environment Testing: Change the background and box colors to match your website’s exact color palette. See how a soft pink shadow looks on a dark mode background before you commit.
  • One-Click CSS: Prefer writing custom CSS? Just hit the “Copy” button to grab the fully formatted CSS code (complete with webkit fallbacks) to paste into Elementor’s Custom CSS tab or your child theme.

How to Create the Perfect Shadow

  1. Set the Position: Choose between an Outline (drop shadow) to make elements pop off the page, or Inset to create a stamped, pressed-in look.
  2. Adjust the Offsets: Use the Horizontal and Vertical sliders to determine the direction of the light source. Positive values move the shadow right and down; negative values move it left and up.
  3. Soften with Blur: A higher Blur value creates a softer, more diffuse shadow. Lower values create a harsh, solid silhouette.
  4. Control the Size: Use the Spread slider to make the shadow larger (positive) or smaller (negative) than the element itself.
  5. Dial in the Color: Select your brand color and use the Opacity slider to ensure the shadow blends naturally with your background.

Pro Tip: For a modern, high-end “Apple-style” shadow, keep your offsets low (0px to 10px), use a high blur (20px to 40px), and keep the opacity very subtle (around 0.05 to 0.15).