What It Does
CSS Lite for Elementor adds a Custom CSS field inside the Elementor editor. You'll find it under the Advanced tab of any widget, section, container, or column — a new section labelled CSS Lite with a code editor where you can write styles directly.
It also adds a Page Custom CSS field in Elementor's Page Settings panel, and a Site Custom CSS textarea under Settings → CSS Lite for global styles that load across your entire site.
Everything you write is scoped to where it belongs. The plugin uses a selector keyword that automatically targets the element you're editing — or you can write regular CSS class selectors like .dot-grid-bg and the plugin will apply them wherever that class appears.
Why I Built It
I record Elementor tutorials. I was spending more time navigating to the WordPress customiser than actually building layouts, just to drop in a few lines of CSS. Every existing CSS plugin I tested was either abandoned, bloated with upsells, or injected site-wide stylesheets for no reason.
CSS Lite does one thing and gets out of the way. It's free forever, it has no licence keys, and it adds zero dashboard clutter. Install it, write your CSS, keep building.
Getting Started
Let's walk through a real example. Dot grid backgrounds are everywhere — hero sections, pricing tables, dashboards — but Elementor doesn't ship with one. Here's how to add it.
Step 1 — Install the plugin. Download CSS Lite for Elementor from the All My Tools directory, upload it to your WordPress site, and activate it. No configuration needed.
Step 2 — Open the Elementor editor. Edit any page, right-click a section, and select Edit Section. You'll see the usual Layout, Style, and Advanced tabs on the left.
Step 3 — Find the CSS field. Click the Advanced tab. Scroll down. You'll now see a section called CSS Lite with a field labelled Custom CSS. This is where you write your styles.
Step 4 — Paste your CSS. Drop this into the field:
.dot-grid-bg {
position: relative;
}
.dot-grid-bg::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
background-color: ffffff;
background-image: radial-gradient(e5e7eb 1px, transparent 1px);
background-size: 16px 16px;
}Step 5 — Assign the class. In the same section settings panel, go to the Layout tab. Find the CSS Classes field and type dot-grid-bg. Save the page.
That's it. Your section now has a clean dot grid behind its content. The dots sit behind your text and widgets because of z-index: 0, and the ::before pseudo-element creates the pattern without adding any HTML to your page.
How the selector Keyword Works
An alternative approach: you could write the CSS directly against the section element instead of using a named class. In the Custom CSS field, use the keyword selector — the plugin will replace it with the actual Elementor ID of that section at render time:
selector {
position: relative;
}
selector::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
background-color: ffffff;
background-image: radial-gradient(e5e7eb 1px, transparent 1px);
background-size: 16px 16px;
}This keeps the CSS self-contained. No class needed. The pattern applies only to that specific section.
The class-based approach (.dot-grid-bg) is better if you plan to reuse the same style across multiple sections. Write the class once in the Site Custom CSS field (Settings → CSS Lite), then just add the class to any section you want. The site CSS field was built exactly for this — reusable design helpers that load across your whole site.
Customising the Pattern
Tighten the dots by reducing background-size from 16px to 12px. Loosen them by bumping it to 24px.
Change the dot colour by editing the first value in radial-gradient. The second colour (transparent) should always stay transparent — that's what creates the dots.
For a dark background version:
background-color: 0b0b0d;
background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);Want the grid on only one column? Target the inner section or column widget instead of the outer section. CSS Lite gives you a Custom CSS field on every Elementor element, not just top-level sections.
Settings Worth Knowing
Visit Settings → CSS Lite in your WordPress admin. There are a few options:
Enable plugin — toggle the entire plugin on or off without deactivating it. Useful for staging.
Site custom CSS — a global textarea for styles you want loaded on every page. Write your design system classes here (like .dot-grid-bg) once, use them everywhere.
Allowed post types — choose which content types get the Custom CSS field in the editor. Defaults to pages and posts.
Editing access — restrict the CSS field to administrators only, or leave it open to anyone who can edit posts.
Download
CSS Lite for Elementor is available now in the All My Tools directory. It's free, it weighs almost nothing, and it checks for updates automatically through the All My Tools API — so you'll get new versions without lifting a finger.