Utility extension · Free
Add a CSS box to Headings, Buttons, Images and containers, type selector to target that one element, and give each device its own rules. Works on Elementor Free.
selector targets this element onlyThe short answer
Custom CSS is an Animation Addons for Elementor extension that gives you Elementor custom CSS free on Elementor 4 Atomic Elements. You switch it on per element, write any CSS, and use the word selector to target only that element. Each breakpoint has its own switch and rules, so a fix can apply to mobile only.
| Plan | Free |
|---|---|
| Type | Utility (panel section) |
| Works on | Elementor's Heading, Paragraph, Button, Image, SVG, Flexbox, Div Block and Grid, plus most Animation Addons atomic widgets (Loop Grid, Posts, Nav, Form, Counter, Flip Box, Nested Slider parts and more) |
| Main controls | Enable Custom CSS, Custom CSS (code field) |
| Engine | Plain CSS, written into the page by a small script |
| Editor preview | Rules apply on the editor canvas |
| Licence | None: works without Animation Addons Pro or Elementor Pro |
| Limits | Not offered on Elementor's Divider, YouTube, Video, Tabs, Accordion or Background Video, or on AAE's Advanced Portfolio, Post Excerpt and Google Maps; rules are added after the page loads |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with Custom CSS, free in Animation Addons, on Elementor 4's own elements. The settings on each card are a good place to start.
A large two-line headline filled with an orange-to-violet gradient on a near-black hero.
selector { background: linear-gradient(90deg,#ff6a3d,#7a5cff); -webkit-background-clip: text; background-clip: text; color: transparent; }Three columns of menu cards on desktop; one swipeable row on phones.
selector { grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; } selector > * { scroll-snap-align: start; }A text-style button whose underline grows from left to right when hovered.
selector { position: relative; } selector::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0; background: currentColor; transition: width .3s; } selector:hover::after { width: 100%; }Greyscale staff photos that turn full colour when their card is hovered.
selector img { filter: grayscale(1); transition: filter .4s; } selector:hover img { filter: none; }The middle of three pricing cards carries a diagonal corner ribbon, with no extra element.
selector { position: relative; overflow: hidden; } selector::before { content: "Most popular"; position: absolute; top: 18px; right: -40px; transform: rotate(45deg); background: #1f7a5a; color: #fff; padding: 4px 48px; font-size: 12px; }Client logos sliding left in a loop; for visitors who ask their device to reduce motion, the strip stands still.
@keyframes slide { to { transform: translateX(-50%); } } selector { animation: slide 30s linear infinite; } @media (prefers-reduced-motion: reduce) { selector { animation: none; } }Features
Every point below is a real control in the Custom CSS panel section or part of how it works. Nothing here needs custom code.
Type selector and Animation Addons swaps it for this element's own attribute, so you never look up a class or ID, and a duplicated card carries its rule without styling its neighbours.
Enable Custom CSS and Custom CSS are both responsive. Switch the box on for Mobile only, or write one rule for Desktop and a lighter one for Tablet.
Pseudo-elements, @keyframes, descendant selectors such as selector:hover img, and media queries all work, because the field takes plain CSS.
Some Animation Addons presets store keyframes and ::before layers in this extension's fields. Keeping Custom CSS switched on is what lets those presets play on the front end.
Step by step
Six steps from switching it on to publishing. The bold names are the exact labels you will see on screen.
Download freeInstall and activate Animation Addons for Elementor and open a page in the Atomic Editor.
Select a Heading, Button, Image, SVG, Flexbox, Div Block or Grid.
In the element's panel, open the Custom CSS section and switch on Enable Custom CSS.
Write your rules in Custom CSS, starting with selector { … } to target this element.
Use Elementor's device switcher to add or turn off rules for Tablet or Mobile.
Check the canvas, then publish.
Honest comparison
What each option has, side by side. Where the other choice is the better fit, we say so.
| Feature | Elementor Pro Custom CSS (V4) | Animation Addons Custom CSS |
|---|---|---|
| What you need | Elementor Pro, Advanced plan or higher | The free plugin; works on Elementor Free |
| Per-device rules | Desktop, Tablet and Mobile | Every breakpoint, each with its own on/off switch |
| Hover, focus, active | Set as states in the Style panel | Written in the code, e.g. selector:hover |
| Media queries | Supported in Desktop mode | Supported (plain CSS) |
| Where you write it | Style panel | Custom CSS section of the element's panel |
Compared with Elementor 4.3.3 (September 2026).
Already on Elementor Pro Advanced? Its Custom CSS, with autocomplete, is a fine choice. On Elementor Free, this extension gives each atomic element the same kind of box at no cost.
Who it's for
The people who get the most out of it, and what they use it for.
Building on Elementor Free for clients who won't pay for Pro.
Who miss the per-widget CSS box.
Who need pseudo-elements, keyframes or one-off mobile fixes.
FAQ
Install the free Animation Addons for Elementor plugin, select an atomic element and open its Custom CSS section. Turn on Enable Custom CSS and write your rules, using selector to target that element. The Animation Addons Custom CSS extension works on Elementor Free, so you don't need Elementor Pro's Advanced plan for per-element CSS on Elementor 4.
In the Animation Addons Custom CSS extension, selector stands for the element you are editing. On the page it is replaced with that element's own attribute, so selector { color: red; } styles only this Heading. You can also write selector:hover, selector::after or selector img to reach states, pseudo-elements and children of that one element.
Yes. In Animation Addons Custom CSS, both Enable Custom CSS and the Custom CSS field are responsive. Switch Elementor's device mode to Mobile and you can turn the box on for phones only, write different rules there, or turn it off on that device. You can also write ordinary @media queries inside the field.
Animation Addons Custom CSS is offered on Elementor's Heading, Paragraph, Button, Image, SVG, Flexbox, Div Block and Grid, and on most Animation Addons atomic widgets. It is not on Elementor's Divider, YouTube, Video, Tabs, Accordion or Background Video. Wrap that element in a Div Block and target it from there, for example selector iframe { … }.
No licence is needed. Animation Addons Custom CSS is part of the free plugin, so it works without Animation Addons Pro and without Elementor Pro. Your rules are applied on the Elementor editor canvas as well as on the published page, so you can check the result before you publish. The extension can be switched off in the plugin's Extensions settings.
Very little. Animation Addons only adds the Custom CSS script to pages where an element has the box switched on, and the rules are plain CSS. One trade-off: the script writes the rules after the page loads, so keep layout styles that must show at first paint in the Style tab or a Class.
Use Elementor's Classes and the Style tab for anything the panel can do, because those styles are shared and compiled with the page. Reach for Animation Addons Custom CSS when the panel can't express it: pseudo-elements, keyframes, child selectors, scroll-snap or one-element exceptions.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
What works well with Custom CSS on the same page or template.
Site-wide CSS, JS or HTML in the header or footer, not tied to one element.
Clip a container to a shape from the Style tab without writing mask-image yourself.
Colour and gradient tints on images without hand-written blend rules.
Change child styles when a container is hovered, set up in the panel (Pro).
Ready-made hover effects if you'd rather not code them.
Free on Elementor Free, targeted with one word, and different on every device.