Custom Box Shadows and Gradients in Elementor

In Elementor's classic widgets and containers, the Box Shadow control adds one shadow, set by horizontal and vertical offset, blur, spread, colour and an outline or inset position. The Gradient background type blends exactly two colours, linear or radial, with a location for each. Both are in the free version. For layered shadows, gradients with three or more colours, or gradient text, give the element a CSS class and write the CSS in your theme. With Elementor Pro, you can write it in the element's Custom CSS instead. Elementor 4's Atomic Editor supports several shadows and several gradient stops natively.

This post walks through the classic controls setting by setting and shows where their limits are. It then gives copy-ready CSS for going beyond them. The details come from Elementor's source code. We also rendered the gradients Elementor produces in Chromium, including one result worth knowing: a blue-to-yellow gradient passes through a dull grey-green in the middle unless you change how the colours are mixed.

The Box Shadow control

You will find Box Shadow under Style → Border for most widgets and in the Style tab of containers. Its settings map directly to CSS:

Table: Elementor Box Shadow settings and their CSS

Setting	CSS part	Natural starting value
Color	Shadow colour, including transparency	Black or a dark brand tint at 8 – 15% opacity
Horizontal	x offset (px)	0
Vertical	y offset (px)	4 – 12
Blur	Blur radius (px)	About twice the vertical offset
Spread	Spread radius (px)	0 or slightly negative
Position	Outline (normal) or Inset	Outline

In Elementor's code, the control writes a single declaration: box-shadow: H px V px Blur px Spread px Color [inset]. One shadow is enough for many designs. For a subtle card, try Vertical 4, Blur 12, Spread −2 and black at 10% opacity.

Box Shadow is also available in the Hover tab of many elements, so you can raise a card slightly on hover. Set a transition duration in the same section so the change animates smoothly.

<h2

The Gradient background

Select a container or widget, go to Style → Background, and choose the gradient icon. Elementor's code defines these settings:

Table: Elementor gradient settings (classic controls)

Setting	Options	Default
Color and Location	First colour and its stop (%, or a custom value)	0%
Second Color and Location	Second colour and its stop	#f2295b at 100%
Type	Linear or Radial	Linear
Angle (linear)	deg, grad, rad, turn or custom	180deg (top to bottom)
Position (radial)	Where the circle starts, such as center center	center center

Elementor outputs background-color: transparent plus a linear-gradient() or radial-gradient() with exactly two colour stops. There is no button to add a third colour in the classic controls.

Before you start

• Set global colours in Site Settings first, so gradients and shadows use your brand palette.
• Decide where custom CSS will live: your theme's Additional CSS (free) or Elementor Pro's Custom CSS.
• Check text contrast for any text that will sit on a gradient. Test against the lightest part of the gradient, not the average.
• Keep the light source consistent. If shadows fall downwards on one section, they should fall downwards everywhere.

<h2

Worked example: what Elementor's gradients look like, measured

We rendered Elementor's gradient output in Chromium and sampled the colour at the middle of each box:

Table: Gradient midpoints (Chromium)

Gradient	Midpoint colour	What it looks like
Elementor-style default blend: #6EC1E4 → #f2295b	rgb(176, 116, 159)	A muted mauve
Same colours with in oklch interpolation	rgb(176, 130, 241)	A brighter violet
Blue #2563eb → yellow #facc15	rgb(144, 151, 127)	A dull grey-green
Same with in oklch	rgb(0, 196, 157)	A clear teal
Both locations at 50%	Hard edge between the colours	Two flat bands, no blend

The default mixing happens in sRGB, which tends to produce greyish middles between colours on opposite sides of the colour wheel. Modern browsers can blend in other colour spaces, such as OKLCH, which keeps the middle vivid. Elementor's classic controls do not offer that option, but custom CSS does. Setting both locations to the same value is a useful trick in the classic controls: it creates a hard split, such as a two-tone background.

Going beyond the controls with CSS

Add a class to the element in Advanced → CSS Classes (for example card-elevated), then add the CSS below to your theme's Additional CSS. With Pro, you can paste the declarations into the element's Custom CSS, using selector in place of the class.

Layered shadow

.card-elevated {
  box-shadow:
    0 1px 1px rgb(15 23 42 / 0.08),
    0 2px 4px rgb(15 23 42 / 0.08),
    0 4px 8px rgb(15 23 42 / 0.08),
    0 8px 16px rgb(15 23 42 / 0.08);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.card-elevated:hover {
  box-shadow:
    0 2px 2px rgb(15 23 42 / 0.08),
    0 4px 8px rgb(15 23 42 / 0.08),
    0 8px 16px rgb(15 23 42 / 0.08),
    0 16px 32px rgb(15 23 42 / 0.08);
  transform: translateY(-2px);
}

Several soft, transparent shadows look more natural than one heavy shadow. Build and preview combinations with the box shadow generator, which supports up to four layers and has a "Layered" preset. If you also set a Box Shadow in Elementor's control, remove it, or the two rules will compete.

Three-colour gradient with vivid blending

.hero-gradient {
  background-image: linear-gradient(in oklch 135deg, #1d4ed8 0%, #7c3aed 50%, #db2777 100%);
}

Browsers that do not support in oklch ignore the whole declaration. If you need older browsers, add a plain background-image line without in oklch above it as a fallback. The CSS gradient generator builds linear, radial and conic gradients with up to six stops and includes a solid background colour as a fallback.

Gradient text

.gradient-text .elementor-heading-title {
  background-image: linear-gradient(90deg, #1d4ed8, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Add the class gradient-text to a Heading widget. In Chromium, the computed styles confirmed background-clip: text with a transparent text colour. Check contrast at both ends of the gradient: the text has to be readable against the background wherever the gradient is lightest.

Text shadows

Headings and text widgets have a Text Shadow control in the free version. Keep it subtle; a shadow with a small blur and low opacity can lift light text off a photo. The text shadow generator previews layered text shadows if you need more than one.

Elementor 4 Atomic Editor

In the Atomic Editor's style system, Elementor's code defines box shadow as a list of shadows, and gradient backgrounds as a list of colour stops. Background overlays can also be stacked: colour, image and gradient layers. So layered shadows and multi-colour gradients are possible without custom CSS on Atomic elements. Check the options in your installed version, as Elementor 4 is still evolving.

Step by step: a polished card in the free version

• Add a container for the card. Set a white background and 12px border radius under Style → Border.
• Set Box Shadow: Vertical 4, Blur 12, Spread −2, colour black at 10%.
• In the Hover tab, set Vertical 10, Blur 24, Spread −4, black at 12%, and a transition of 200ms.
• Add a gradient strip at the top with an inner container 6px high, using a linear gradient from your primary to your accent colour at 90deg.
• Check it on light and dark section backgrounds and on mobile.

When you want the more natural layered shadow, replace steps 2 and 3 with the card-elevated class and CSS above.

Verify the result

• Inspect the element and confirm only one box-shadow rule applies, not both the control's and your class's.
• Check gradient text and text on gradients for contrast at the lightest point. Our guide to colour contrast explains the ratios.
• Look at shadows on every background colour they will sit on.
• Test hover effects with a keyboard: hover-only effects should not hide information.
• Check mobile, where large shadows can look heavier on small cards.

Common mistakes

• One heavy, dark shadow at 30 – 50% opacity.
• Setting Box Shadow in the control and in custom CSS at the same time.
• Gradients between opposite colours that turn grey in the middle.
• Gradient text with a light end that disappears on a white background.
• Different shadow directions on different sections.
• Using a gradient on large text areas that makes reading tiring.
• Expecting a third colour stop in the classic gradient control.

Troubleshooting

Table: Shadow and gradient problems in Elementor

Symptom	Likely cause	Fix
Shadow cut off at the edges	Parent container clips overflow	Add padding to the parent or set its overflow to visible
Shadow square on a rounded card	Radius set on a child, not the element with the shadow	Set border radius on the same element
Custom CSS shadow ignored	Elementor's control sets a more specific rule	Clear the Box Shadow control, or make your selector more specific
Gradient shows only one colour	Both locations at the same value, or the second colour is transparent	Adjust locations and check the colours
Gradient text invisible	Unsupported clip property in an older browser	Keep a solid colour fallback for older browsers
Changes not visible on the live site	Cached CSS	Regenerate Elementor CSS (Elementor → Tools) and purge caches

Frequently asked questions

How do I add a box shadow in Elementor?

Select the element, open Style → Border (or the container's Style tab), and set Box Shadow: colour, horizontal, vertical, blur, spread and position.

Can I add multiple box shadows in Elementor?

Not with the classic control, which writes one shadow. Add a CSS class and define a layered shadow in your theme's CSS, use Pro's Custom CSS, or use Atomic elements in Elementor 4.

Is the gradient background a Pro feature?

No. Gradient backgrounds, background overlays and box and text shadows are in the free version.

Can I use more than two colours in an Elementor gradient?

The classic control supports two colours. For three or more, use CSS on a class, or the Atomic Editor's gradient stops.

Why does my gradient look grey in the middle?

Browsers blend in sRGB by default, which dulls the middle of gradients between very different colours. Blending in oklch in custom CSS keeps it vivid.

How do I make gradient text in Elementor?

Add a class to a Heading widget and apply background-clip: text with a transparent text colour in your CSS, as shown above.

How do I add a shadow on hover?

Switch to the Hover tab in the same style section, set a different Box Shadow, and add a transition duration.

What is an inset shadow?

A shadow drawn inside the element, which makes it look pressed in. Choose Inset in the Position setting.

Do box shadows affect performance?

Not noticeably for normal use. Very large blurs animated on many elements at once can cost paint time on slower phones.

Why is my shadow cut off?

A parent element is clipping it. Give the parent some padding, or allow overflow to be visible.

Next step

Replace one heavy shadow on your site with the layered version above, and check any gradient between contrasting colours for a grey middle. For ready-built sections to experiment on, browse our free Elementor template library.