In Elementor Pro, add custom CSS to any widget or container under Advanced, Custom CSS, using the word selector to target that element (for example selector { border-radius: 20px; }). For site-wide CSS, use Site Settings, Custom CSS. Without Pro, add a CSS class in Advanced, CSS Classes and write the rules in Appearance, Customize, Additional CSS.
selectortargets the current element in Pro.- Site-wide rules go in Site Settings, Custom CSS.
- Free version: CSS classes plus Additional CSS.
- Use media queries for device-specific tweaks.
- Prefer widget settings first; CSS for what settings cannot do.
Where can you add CSS in Elementor?
| Location | Scope |
|---|---|
| Widget or container, Advanced, Custom CSS (Pro) | That element |
| Page Settings, Advanced, Custom CSS (Pro) | That page |
| Site Settings, Custom CSS (Pro) | Whole site |
| CSS Classes + Additional CSS (free) | Anywhere the class is used |
Which CSS snippets are most useful?
- Gradient text:
selector .elementor-heading-title{background:linear-gradient(90deg,#0A2540,#66C10A);-webkit-background-clip:text;color:transparent} - Card hover lift:
selector:hover{transform:translateY(-6px);transition:.3s} - Mobile-only tweak:
@media(max-width:767px){selector{padding:20px}} - Anchor offset:
selector{scroll-margin-top:90px}
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
How do you find the right selector?
Picture trying to change a button’s hover colour that has no setting. Right-click it, choose Inspect, find its class in DevTools, test a rule live, then paste it into the widget’s Custom CSS using selector as the prefix. That is the full workflow. Learn the fundamentals in HTML and CSS basics for WordPress users.
Want to learn Elementor CSS faster with a tutor?
I teach WordPress and Elementor 1-to-1 over Zoom or Google Meet, on your own website, at your pace. Lessons start at $40, every lesson is recorded so you can rewatch it, and you get a short checklist afterwards. Beginners, business owners, students and freelancers are all welcome. See lessons and prices or book a free intro call.
Frequently asked questions
How do I add custom CSS in Elementor?
In Elementor Pro, use Advanced, Custom CSS on any element with the selector keyword; site-wide CSS goes in Site Settings.
Can I add CSS with Elementor Free?
Yes: give the element a CSS class and add rules in Appearance, Customize, Additional CSS.
What does selector mean in Elementor CSS?
It is replaced with the unique class of the current element, so rules only apply to it.
How do I apply CSS only on mobile?
Wrap the rule in a media query such as @media (max-width: 767px).
Sources
Live 1-to-1 WordPress and Elementor lessons on your own site, from $40. Every lesson recorded. Beginners welcome.
More WordPress guides
Guide, 3 min readWordPress and Elementor Tutoring: Your Questions Answered
Guide, 3 min readWordPress Multisite Explained: Who Needs It (and Who Does Not)
Guide, 3 min readWordPress Comments and Spam: Settings That Keep Your Site Clean
Guide, 3 min readHow to Move WordPress to HTTPS (SSL) and Fix Mixed ContentRather have an expert run your WordPress site?
Tanvir H is a Bangladesh-based WordPress and Elementor web designer with 7+ years of experience, 650+ projects and a 4.9 client rating. New websites, redesigns, fixes, speed, security and SEO, handled by one expert who explains everything in plain English and works with clients worldwide.
