Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer 
The visual CSS editor that anyone can use
SiteOrigin CSS is a free WordPress plugin for customizing your site's design. Visual controls for beginners, a full code editor for developers, and a live inspector to find any element. Works with any theme.
Three Ways to Edit
Visual controls, code editor, or both
SiteOrigin CSS meets you where you are. Use the visual editor to style without writing code, the code editor for full control, or the inspector to find any element on your page.
Click-to-Inspect
Hover over your live site and click any element. The inspector reveals a color-coded box model overlay for margins, padding, and borders, then suggests the best CSS selector ranked by specificity so you know exactly which rules win.
40+ Visual Properties
Three organized tabs (Text, Decoration, and Layout) covering colors, fonts, shadows, borders, spacing, positioning, and more. No code needed.
Full Code Editor
CSS linting, autocompletion for selectors and properties, search and replace, code folding, and jump-to-line. A professional IDE inside WordPress.
Per-Page CSS
Apply CSS globally or target individual pages and posts. Give your homepage, landing pages, or specific articles their own unique styles without affecting the rest of your site.
Works With Any Theme
Standard CSS works everywhere. Your customizations survive theme updates and transfers. No vendor lock-in, no child theme required.
Output: Dedicated CSS File (default) The Workflow
Point, click, style. That's it
No digging through theme files. No child theme setup. Open SiteOrigin CSS, find the element, and change its appearance.
Open the Inspector
Launch SiteOrigin CSS from your WordPress admin. The inspector lets you hover over your live site, highlighting margins, padding, and borders in real time. Click any element to select it.
Style Visually or with Code
Use the visual controls for quick changes like colors, fonts, spacing, backgrounds, borders, shadows, and positioning across three organized tabs. Or switch to the code editor for full CSS control with autocompletion.
Preview & Publish
See every change in real time before it goes live. Once you're happy, hit save. Every revision is recorded, so you can roll back to any previous version with a single click.
Browse and insert pre-built CSS snippets for common customizations. Search by name, preview the code, and insert with one click. No need to memorize selectors or property syntax.
Power Features
Professional tools, zero learning curve
An editor that grows with you, from visual tweaks to advanced CSS.
CSS Revisions
Every save creates a timestamped revision. Experiment freely knowing you can roll back to any of your last 15 versions with a single click. Like version control for your styles.
Snippet Library
Searchable collection of CSS snippets for common customizations. Browse, preview, and insert with a click. Developers can register custom snippet paths.
Smart Autocompletion
The editor analyzes your theme's stylesheets and suggests selectors, properties, and values as you type. CSS linting catches errors before you save.
Live Preview
Every change appears instantly. Navigate your site within the preview to test CSS on different pages. Selector highlighting shows exactly which elements your CSS targets.
Light & Dark Themes
Switch the code editor between light and dark modes. Your preference is saved and the editor remembers your choice.
color: #333;
}
color: #333;
}
Performance-First Output
Output CSS to a dedicated static file that browsers and CDNs can cache, or embed inline for simpler setups. Your CSS survives theme updates because it's stored independently.
/uploads/so-css/so-css-theme.css Trusted by 100,000+ Sites
The CSS editor WordPress should have built in
Over a decade of continuous development. SiteOrigin CSS is the reliable, no-nonsense tool that lets you customize any theme without the complexity.
Why site owners choose SiteOrigin CSS
WordPress.org Reviews
Loved by developers and beginners alike
Real five-star reviews from the WordPress.org plugin directory.
“I don’t know what I’d do without this. I used to struggle writing styles in WordPress, mainly because it was difficult to target a particular property using the browser inspector. But this makes the whole job dead easy, and it’s free!”
“The best CSS editor for people that are not HTML or CSS savvy — even for people that are savvy it’s still the best I’ve seen. I actually went ahead and learned a lot of coding, in order to be able to do what I want with this plugin.”
“I have been building WordPress sites for maybe 12 years now, and this CSS Editor is the best I’ve ever used, both in terms of how well it works, and in the way it works. A really big thank you to the developer.”
“My production time just got cut in half. To the fantastic developers of this tool, a hearty thank-you!”
“The visual editor makes it super easy to find the correct element to edit CSS. A must-have tool for any WP dev.”
“Saves loads of time, works perfectly and is great to use whether you know CSS or not.”
“This plugin is amazing. It has saved me hours of CSS frustration. Very well designed interface.”
“This is how a CSS plugin should work! The preview is real-time and customization is a breeze!”
“It lets you skip using Chrome dev tools and easily find what CSS classes you need to change.”
“Rather than just helping to customize CSS, it also helps teach CSS. I’ve learned so much!”
“It puts the full power of all CSS elements in your hands. The nightmare of CSS is now dreamy.”
The complete SiteOrigin toolkit
SiteOrigin CSS pairs perfectly with Page Builder and Widgets Bundle. Build layouts, add content widgets, then fine-tune every detail with custom CSS.
.hero-section { padding: 4rem 0 }
.entry-title { color: #1a1a2e }Start customizing today
Install SiteOrigin CSS and take control of your site's design. Visual controls when you want simplicity, a full code editor when you need power. Free forever, works with any theme.