Design tools pages
Offer visitors a quick shadow builder.
Content / widget · Elementor module
CSS Box Shadow Generator Widget Plugin for Elementor
Let visitors layer box shadows with offsets, blur, spread, colour, opacity and inset, see them on a card and copy the CSS.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / CSS box shadow generatorProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Try it
These are the actual published widgets running in your browser; change a layer to see the card update.
02 / Inside WordPress
CSS box shadow generator controls in Elementor
Shadows sets the starting layers, colour and opacity, presets, the most layers and whether visitors can edit. Behaviour chooses live updates or a Generate button. Labels sets the heading, layer and colour labels and every button and message. The Style tab covers the layout, preview background, card colour, height and corners, fields, CSS panel and buttons.
03 / Website use cases
Where to use css box shadow generator
Good shadows are often two or three layers with soft, translucent colours, and the box-shadow syntax is hard to tune by typing: which number is blur, which is spread, and how inset changes it. CSS box shadow generator shows each change on a card and writes the shortest CSS, from a subtle edge to a lifted card or a focus ring.
Style guides
Show the card, button and focus shadows with their CSS.
Learning CSS
See what blur, spread and inset each do.
04 / Installation and setup
How to add a box shadow generator in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable CSS box shadow generator in the Complementor library.
Add the widget to a design tools or style guide page.
Type the starting shadows, one per line, such as 0 12 24 -6 #4338CA 22%.
Keep the presets for quick starts, or turn editing off to show a ready shadow.
Style the preview and panel, then copy the CSS to check.
05 / Content and style controls
Customize css box shadow generator in Elementor
Configure the settings available for this module to suit the page you are building.
X and Y offsets, blur and spread with a slider and a number each.
Colour picker with a hex field and an opacity percentage.
Inset shadows inside the box.
Up to eight layers, added and removed by visitors.
Presets: subtle, soft, lifted, floating, hard edge, inset and glow ring.
The shortest CSS: blur and spread left out when 0, opaque colours as hex.
Copy CSS, and an option to show a ready shadow without editing.
06 / Choose the right approach
CSS box shadow generator and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
Elementor box shadow control
Shades your own elements; this widget gives visitors the CSS.
CSS border radius generator
Shapes corners the same way.
07 / Requirements and compatibility
CSS box shadow generator compatibility with Elementor
- Requires Elementor.
- box-shadow only, in px.
- Runs in the visitor’s browser.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot css box shadow generator
Check these settings if the published page behaves differently from the editor.
Why is blur missing from the CSS?
When blur and spread are both 0 they are left out; browsers read the shorter form the same way.
Why does the colour show as rgba()?
Below 100% opacity the colour is written as rgba() with the opacity as a decimal; at 100% it stays a hex code.
Why can I not add another shadow?
The Most shadow layers setting caps the layers; the default is four.
My old settings show a solid shadow.
A saved colour without an opacity starts at 100%, as it did before; set Starting opacity to soften it.
CSS box shadow generator plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Is anything sent to a server?
No. Everything runs in the visitor’s browser.
Can I use it with the keyboard?
Yes. Every value has a labelled field, and the arrow keys change numbers; the sliders are an extra for the mouse.
Can it make several shadows at once?
Yes. Each layer is listed in order and joined into one box-shadow.
Can I just show a shadow?
Yes. Turn off Let visitors edit the shadows.
10 / Annual All Access subscription
Get css box shadow generator with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.