Visual CSS Style Editor


Style your WordPress site visually. Discover the most popular front-end design plugin! Try live demo.

Visual CSS Editor

The plugin allows you to customize any page and theme without coding. Click on an element and start visual editing. Adjust colors, fonts, sizes, positions and a lot more. Take full control over your website’s design with more than 60 styles properties.

Key Features

  • Customize any page, any element
  • Customize WordPress login page
  • Automatic CSS selectors
  • 60+ CSS properties
  • Visual Drag & Drop
  • Visual Margin & Padding editing
  • Live CSS editor
  • Live preview
  • Manage the changes
  • Undo / Redo history
  • Export stylesheet file

Design Tools

The plugin provides you advanced tools and ready-to-use libraries for styling your website effortlessly.

  • Flexible element inspector
  • Single element inspector
  • Responsive tool
  • Element search tool
  • Measuring tool
  • Wireframe view
  • Design information tool
  • Gradient generator (pro version)
  • Animation manager (pro version)
  • Animation generator (pro version)

Design Assets

Reach many design assets with one click. Customize your website’s design to fit your needs!

  • 800+ Google fonts (pro version)
  • 300+ Background patterns (pro version)
  • Unsplash background stock images (pro version)
  • Material and flat color palettes (pro version)
  • 50+ Animations (pro version)

CSS Properties: Text

  • Font Family (pro version)
  • Font Weight
  • Color (pro version)
  • Text Shadow
  • Font Size
  • Line Height
  • Font Style
  • Text Align
  • Text Transform
  • Letter Spacing
  • Word Spacing
  • Text Decoration
  • Text Indent
  • Word Wrap

CSS Properties: Background

  • Background Color (pro version)
  • Background Image (pro version)
  • Background Clip
  • Background Blend Mode
  • Background Position
  • Background Size
  • Background Repeat
  • Background Attachment

Other CSS Properties

  • Margin
  • Padding
  • Border
  • Border Radius
  • Position
  • Width (pro version)
  • Height (pro version)
  • Lists
  • Flexbox
  • Animation
  • Box Shadow
  • Transition
  • Filter
  • Transform
  • Opacity
  • Display
  • Cursor
  • Float
  • Clear
  • Visibility
  • Pointer Events
  • Overflow

Compatible with any theme & plugin

This works seamlessly with almost any WordPress theme and plugin. You can use it for editing the pages that you created with the page builders.

Compatible with All Page Builders

The plugin allows you to customize the pages created with Gutenberg block editor, Elementor or another page builder. Re-design your website today.

How does this work?

The plugin generates CSS codes like a professional web developer in the background while you are editing the web page visually.

The plugin doesn’t modify any theme file, instead of it loads the generated CSS codes to the website in a dynamic way so that you can manage the changes anytime.

Premium features

The following properties are available only in paid version;

  • Font Families (Google fonts)
  • Font Color
  • Background Color
  • Background Image
  • Width & Height
  • Animations

Purchase pro version now to unlock all features.

Documentation and Support

Liked This Plugin?


  • Applies a background color to an element.
  • Adds a background gradient to an element.
  • Editing font family.
  • Editing font family.
  • Editing padding & margin visually.
  • Adds animation to the element.
  • Applies CSS3 gradient to an text element.
  • The editor panel. Choose one block on your website and apply any style visually.
  • The text properties in the editor panel.
  • The background properties in the editor panel.
  • CSS editor for professional users.


  1. Upload ‘yellow-pencil-visual-theme-customizer’ folder to the ‘/wp-content/plugins/’ directory
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.
  3. Go to WordPress Panel > Appearance > “YellowPencil Editor” to customize!

Preguntas frecuentes

Will the plugin work on my theme?

Yes, this plugin is compatible with all themes and plugins. You can be sure that it works in the best possible way.

Is it safe to use?

Yes, the plugin does not modify the theme and plugin files. This is 100% safe. You can manage all the changes, disable or delete it at any time.

Do I need to know coding knowledge to use it?

No, the plugin has a simple interface and this developed for anyone. A beginner user can use it easily. If you worry about how to use it, plugin documentation will help you.

Can I customize WordPress Login page?

Yes, In the WordPress Dashboard, go to Appearance > YellowPencil Editor. Select the target page as WordPress login page and click customize button.


18 de octubre de 2020
This is a must have plug-in. Full stop. And they are literally giving it away for what they charge for it (yes buy it, it's worth every penny and then some). What's truly remarkable about this plugin, even though it hugely simplifies CSS customization and streamlines it for you, it'll actually make you better at CSS if you're a beginner. I keep the CSS Editor and Responsive Mode environement open while I'm making my changes so I can watch exactly what yellow pencil is doing in real-time, and simultaneously check for compatibility across various screen sizes. Having done this so much (partly because it's so fun) I've gained a substantial better understanding of how CSS works and am getting to the point that I can go straight into the CSS editor and modify styles on my own. It's 98.5% perfect - the only minor 'bug' I've found is sometimes, rarely, the changes you make, particular on narrow-screen/mobile modes, don't render properly in the preview - though they actually do render properly when you go live. This could be an issue with my particular theme or something I have done - who knows. I keep a phone and tablet with me and monitor changes on those devices while I work. It's a very minor little thing that only happens rarely, but if it's not just my own issue, hopefully they'll fix it in an update. Even so, this plugin is absolute gold and much better than some alternative CSS editors I tried prior. I frequently copy and paste all the changes to CSS across individual screens and global to personal notes for backup - just in case. That also makes it really easy for me to revert if I mess up (though I really haven't needed to do that, just peace of mind). You can also backup your CSS from the plugin's folder in wp-content. Many thanks to the developers at WaspThemes for creating such an indispensable tool. This makes WordPress so-much-easier to deal with, and has taught me so much in so little time. -shane,
12 de octubre de 2020
I would give this plugin 5 stars, however due to one major lacking feature unfortunately I cannot. The plugin works as described and fine for the most part. I have found instances where it fails to save some changes though, or better said the changes don't take effect even though it said the changes were saved. One example of this is where sometimes I have changed the radio size for a button or block corner and it doesn't. However, In the majority of cases it has worked. Now here's the big downside for me, and I'm pretty sure that for many others too. There's no way to hide this plugin in the WordPress Editor from other site members such as Editors or other Admins. It simply does not support that. This is extremely important for company sites for example, where you have several staff members or Community sites with lots of Authors and Editors etc. You certainly don't want the wrong person doing changes to your front facing website. Sure, you can always revert the changes, but that's not how it should be. Upon contacting the author for possible solutions, the response was vague and he basically pointed me to search for tutorials on the internet and mentioned a plugin which supposedly allows it (After I looked for those tutorials) I did not find these, and after trying the plugin he mentioned I found no way to do what the plugin author claims it could do to solve my issue. I also searched and installed several block control and gutenberg blocks management plugins and none of them could hide the YellowPencil from showing up on the WordPress editor. This plugin is created in a different way to other plugins, thus such plugins don't work with it. I understand I'm not a paying customer, however the weak support and no prospect of a fix prevented me from buying the paid version. Hopefully the author changes his mind and starts supporting permissions on this product. Other than that if you don't need this lacking feature, then this is an awesome plugin. Regards
14 de julio de 2020
You can customize everything on your WordPress site with just a click. You'll automatically become an expert in CSS without breaking a sweat. You have no limitation whatsoever. You'll save yourself considerable amount of time when you use this plugin. Visual CSS Style Editor is a most have on all WordPress website.
30 de marzo de 2020
Non sapevo esistesse un modo così facile per aggiustare il proprio template. Sensazionale.
23 de enero de 2020
Excellent tool which is must have for anyone wanting to enjoy the magic of css. Awesome work and very intuitive interface for both professionals and amateurs alike.
Leer todas las 71 reseñas

Colaboradores y desarrolladores

Este software es de código abierto. Las siguientes personas han contribuido a este plugin.


"Visual CSS Style Editor" ha sido traducido a 1 idioma local. Gracias a los traductores por sus contribuciones.

Traduce "Visual CSS Style Editor" a tu idioma.

¿Interesado en el desarrollo?

Revisa el código, echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios


New: shortcut for saving the changes. [CMD/CTRL + S]

License activation bug fixed.


  • Improvements to CSS selector engine.
  • Outdated CSS warnings have been updated.
  • Google Fonts Updated.
  • A few minor bugs fixed.


  • Fixed a bug that removes the element’s style attribute after selected.


  • Improvements to editor performance.
  • Added repeat option for animation trigger.
  • Removed animation-iteration-count property.
  • Fixed a bug with changing WooCommerce product tabs in the cursor tool.
  • Fixed a bug with changing the CSS property formats.


  • Textarea, Audio, Video Select element selection bug fixed.
  • Compatibility improvements for Oxygen Builder and King Composer plugins.
  • Fixed a bug that occurred while listing children’s elements.
  • The styles in the review changes panel are grouped.
  • A PHP warning error fixed, thanks to Jean Lorencini for your help.
  • Added Animation easing option (animation-timing-function)


  • The license activation error fixed.


  • The editor panel has been redesigned to improve the user experience.
  • Portable CSS editor.
  • New Color Picker.
  • Custom CSS variable bug fixed.
  • Live preview bug fixed on the login page.
  • Text-decoration bug fixed.
  • CSS position sticky bug fixed.
  • Performance Improvements for listing font families.
  • Fixed a conflict with ace.js on some servers.
  • Fixed the bug of reading the wrong data of line-height property.


  • animation-events.js file converted to pure javascript from jQuery to run and load faster.
  • nth-child CSS selector conflict fixed.
  • Added bulk actions to “manage styles” page. You can easily manage the customizations now.
  • Fixed conflicts with PHP 7


  • Breakpoint active problem fixed in the responsive tool.
  • “Breakpoints is not readable” problem fixed.


  • We’ve added an option to the font-family property for include or not include the google font file to the website.
  • CSS Transition property.
  • Accessibility: gives detailed information about the element accessibility in the design information tool. The plugin is calculating the text contrast ratio with WCAG AA standards.
  • New Responsive Tool.
  • custom.css file moved to uploads folder.
  • CSS saving bug fixed.
  • Number slider updated.
  • Google fonts updated
  • animate.css updated
  • Auto media API improved.
  • Multiple element selection bugs fixed.
  • Many bugs fixed, and the plugin improved.


  • Extra Security: Added nonce (token) for all action.


  • Important security bug fixed: A security bug in visitor view feature is fixed…


  • Element selection bug fixed on Firefox.


  • A few important bugs fixed.


  • A few bugs fixed.


  • New: CSS direction property
  • New: CSS Grid Properties. (select a grid element to reach grid properties)
  • New: page colors palette
  • New: Sticky option added to CSS position property
  • New: Child Elements added to contextMenu
  • Improvements to flex properties.
  • Improvements to the interface.


  • Improvements to line-height property.
  • Improvements to Element Inspector.
  • Stuck on loading screen bug fixed.
  • Improvements to the interface.


  • Important and unimportant, so many errors fixed.
  • Compatibility update for WordPress 5.0
  • Anymore CSS Editor doesn’t reorder CSS rules when adding a new rule.
  • The plugin has been made more useful with little touches.


  • New Feature: Stock Images (Unsplash API)
  • New Feature: Page assets (Shows all images on the page in Design information Tool)
  • New Feature: draft mode
  • improvements to editor loading performance.
  • Font loading bug in login page fixed.
  • AutoComplete bug in CSS Editor fixed.
  • PHP error in Login Page fixed.


  • New Feature: WordPress login page customization support.
  • A small bug fixed on Single Inspector.


  • Blank page bug fixed.
  • CSS editor conflict fixed.


  • Media query sorting bug fixed.


  • CSS Loading bugs fixed.
  • Bugs in gradient generator tool fixed.
  • Improvements to editor performance.


  • CSS loading bug fixed on https protocol.
  • Media query bug fixed.


  • New Feature: Editable Element labels and CSS comment support for CSS selectors.
  • New Feature: Specifies if property groups edited without open it.
  • New Feature: Always shows Margin and Padding on mouseover.
  • New Feature: High-performance option for the editor.
  • New: advanced settings to Editor.
  • New: Gutenberg integration support.
  • New: background-position-x and background-position-y properties.
  • New: support to edit draft pages.
  • New: RTL support.
  • The selected element reset bug fixed.
  • Live preview bug fixed.
  • Single inspector bug fixed.
  • Smart media query sorting bug fixed.
  • Improvements to core functions.
  • Improvements to dynamic id and classes.


  • Fixed: “the page jumps in the responsive tool.”
  • CSS editor scrollbar bug fixed.
  • Improvements in core functions.


  • New: Detection automatically for the dynamic id and classes.
  • Font-family bug fixed.
  • Improvements in core functions.
  • ContextMenu bug fixed.
  • A small bug fixed on Element Tree.


  • ContextMenu bugs fixed.
  • Customization type bugs fixed.
  • WooCommerce bugs fixed.
  • Bugs fixed for low PHP versions.
  • Resizing bug of body element fixed.
  • Element selection bug fixed.


  • Single and template customization bugs fixed.
  • Synchronize feature has been canceled.
  • Improvements to core functions.


  • An important bug fixed.


  • A few small bugs fixed.


  • New Feature: The parent elements of the selected element always visible at the bottom of the editor.
  • New Feature: Review all changes visually, disable or change.
  • New Feature: Fixed Right Panel, drag-drop the right panel to the right corner of the page.
  • New Feature: CSS Flexbox Support, Flexbox settings will be available on right panel when you select a flexbox element.
  • New Feature: Live Customizing type change, Change the current customizing type from the right panel without refresh the page.
  • New Feature: Change the target page live, Change the target page by clicking the page name on the right panel.
  • New Feature: An new smart element Search Tool.
  • Fixed: Selection problem on the elements which has javascript click events.
  • New Feature: CSS Property Based Responsive Options, The editor will show you if there a “width” property applied in another media query to the target element.
  • New Feature: Review breakpoint styles, review selected element styles, the customizing types styles visually, see all applied styles.
  • New Feature: Customizable Interface, all tools are resizable.
  • New Feature: Gradient Text Support, Select a background and apply “text” value to the background-clip property.
  • New: 300+ Modern CSS3 Gradients
  • New: Single, Template, Global tabs to CSS editor.
  • New: All Pseudo-Classes to the editor.
  • New: CSS Validation to CSS editor
  • New: iframe element selection support by click.
  • New: Highlight elements by class and ID, click any class or id on Design Information tool to highlight the target elements.
  • New: CSS styles are available in Admin Page of YellowPencil, you can see applied styles directly in Admin Panel.
  • Improvements: 23x faster CSS process and read speed with the new core functions.
  • Improvements: Inspector tool is 3x faster
  • Improvements to all tools reorganized for better user experience.
  • Improvements to core functions of the editor.
  • Many bugs fixed.
  • Notice: Exported the plugin data in older versions will not work on 7 and above versions.
  • Notice: Parallax image features anymore not available in the editor, but the elements that applied parallax feature will still work.
  • Notice: Front page, The posts page, and archive pages are not affected by the page template styles.
  • Notice: Defined selectors in the theme and plugin stylesheets are anymore not available in the editor.


  • New: pointer-events property
  • New: cursor property
  • logical improvements to CSS selectors
  • Animation manager tool bugs fixed


  • New: support for HTML5 id and classes. ‘##test’, ‘#.#test’ and such.


  • The changes you made may not be saved” popup problem has been fixed.


  • Parent tree view feature has been New: to element settings.


  • New smart algorithm for the auto important tag.
  • Improvements to Editor loading speed.
  • CSS Editor bugs fixed.
  • Autoptimize plugin conflict fixed.


  • Visual padding editing bug fixed.


  • New Feature: Visual Margin & Padding Editing
  • New Feature: List Style Properties
  • New Feature: Smarter selector algorithm
  • New Feature: Element Box Model has been New: to the design information section
  • New: text-indent and word-wrap CSS properties
  • Improvements to Gradient generator tool
  • Improvements to Responsive breakpoints
  • Improvements to ColorPicker
  • Fixed: conflicts with CSS minify and WordPress Cache plugins.


  • Improvements to the editor
  • Saving bugs fixed
  • Better editor performance


  • Saving issue fixed.


  • jQuery updated
  • Drag & Drop bug fixed
  • CSS selector bugs fixed
  • Fixed: a small bug with breakpoints


  • A few bugs fixed.


  • New: visitor view feature.
  • Fixed: element inspector bugs
  • Fixed: the plugin does not delete old custom stylesheet files
  • Fixed: animations do not work in Chrome
  • Fixed: gradient Generator bugs
  • Improvements to CSS selectors
  • Improvements to update API


  • New: dynamic breakpoints to responsive tool
  • New gradient background generator
  • New: new Google fonts.
  • Fixed: animation generator and animation manager tool bugs.
  • Fixed: WooCommerce shop page bug.
  • Improvements to responsive tool
  • Improvements to visual selection
  • Improvements to background patterns


  • New: edit button to post edit pages in WordPress dashboard.
  • Fixed: a few bugs.


  • CSS Editor bug fixed.


  • Performance optimization. 6x times faster.


  • Display property updated
  • Improvements to smart @media AI
  • Improvements to the important automatic algorithm
  • Admin panel pages updated
  • New: one-click plugin activation with Envato login.
  • Fixed: a few bugs.


  • New: background-blend-mode property
  • New: rotateX, rotateY and rotateZ settings to transforms.
  • New: support to active, link, visited states.
  • Minifying CSS in header Output
  • CSS Selector algorithm Updated
  • Fixed: SSL bug in live preview tool.
  • New Algorithm: Detecting CSS rules in defined media queries of the target element and auto-creating limits with media queries.
  • Live Resizing: Height property replaced with min-height
  • Live Resizing: Top and left borders anymore not resizable. This feature disabled to keep the responsive system stable.
  • Fixed: minor bugs
  • Animation bugs fixed.


  • A few bugs fixed.


  • Fixed: the elements selecting bug.
  • Fixed: the conflict with W3 total cache plugin.


  • New Interface.
  • 1500% more fast style processing time.
  • 300% faster-resizing performance.
  • Press SHIFT key to select multiple elements.
  • Functional improvements.


  • Fixed: a critical loading issue.
  • A few Improvement to make it more functional.
  • Many bugs fixed.


  • New: multiple element selection support
  • New: font families support to the exportable stylesheet.
  • New: static stylesheet support.
  • New: a new option for reset the selected element.
  • New: Press delete key for hiding the selected element.
  • Improvement to hover and focus states.
  • Improvement to Search Element Tool.
  • Improvement to Single Selector Tool.
  • Engines of filter, box-shadow and transform properties updated. High performance!
  • Improvement to undo & redo tools.
  • Improvement to smart guides.
  • New Shortcuts: [R] Responsive Tool, [M] : Measuring Tool, [W]: Wireframe, [D]: Design information


  • Fixed: a bug with the single selector tool.


  • Fixed: a few small bugs.


  • Fixed: two critical bugs.


  • Fixed: a critical error.


  • New: transparent color support. (RGBA)
  • Improvement to editor loading interface.
  • New: Now you can export all CSS rules as ready-to-use.


  • Improvements for Chrome browser.


  • Animations work compatibly with the responsive tool.
  • A critical bug fixed.


  • Critical improvements to the core.
  • Improvements to editor performance


  • Fixed: slow loading issue.
  • Improvements to CSS selectors.


  • Critical CSS selector bugs fixed.


  • Resize Elements visually
  • Improvements to CSS Selectors.
  • Improvements to the interface.
  • New: smart guides to drag & drop and resize tools.
  • New: design information tool; Information about selected element, typography and more.
  • Improvements to CSS Editor.
  • Improvements to border-radius, font-family, animation properties.
  • New: animation manager tool


  • New Feature wireframe tool.
  • Fixed: minor bugs.


  • New smart artificial intelligence! (Generating CSS codes as the human)
  • Important performance updates!
  • Improvements to the core.
  • Woocommerce saving bug fixed.


  • Saving bug fixed.
  • New: Export & Import features


  • Fixed: an important bug for SSL.
  • Two minor bugs fixed.


  • Fixed: bugs on localhost.
  • Minor bugs fixed.


  • New: Resizable responsive tool
  • New: Support any CSS media query
  • improvements to background patterns
  • improvements to custom selectors
  • improvements to measuring tool And CSS Editor


  • Fixed: CSS selector bugs.


  • Fixed: aiming bugs.


  • Fixed: measuring tool bug.


  • New: Single selector tool
  • New: Measuring tool
  • New: “write CSS” option to contextMenu.
  • Improvements on the interface.
  • Shortcuts updated.


  • New: autocomplete for CSS selectors in the editor.
  • Improvements to CSS selectors.


  • Fixed: SSL bug.


  • New: showing the padding property visually.
  • New: Smart titles for elements.
  • Improvements to plugin core.


  • Animation bugs fixed.
  • CSS Selector bugs fixed.


  • New: animation generator tool.
  • Improvements to visual editing.
  • Improvements to font family.
  • Box-shadow color bug fixed.
  • Improvements to editor core.
  • Background color bug fixed.
  • “CSS editor doesn’t show codes” bug fixed.
  • “CSS data lose” bug fixed.


  • WordPress 4.4 update.
  • CSS Selector bugs fixed.


  • New: visibility Property
  • Improvements to transformed elements.
  • Improvements to drag & drop and live resizing tools.
  • Animation bugs fixed.
  • Improvements to CSS Editor


  • New: live element resizing
  • Improvements to CSS selectors
  • Improvements to the core.
  • Improvements to the color picker
  • Improvements for small screens.
  • Drag & Drop bugs fixed.


  • A few small bugs fixed.


  • Improvements to the color picker
  • Improvements to performance
  • Improvements to undo / Redo tools
  • Improvements to CSS editor
  • Improvements to automatic important system algorithm
  • Improvements to the slider
  • Loading bug fixed.
  • New color picker!


  • Some bugs fixed.
  • New: custom selector support.
  • Documentation updated.


  • New: automatic update API
  • Improvements to the interface
  • Many improvements to core
  • Fixed: “select just it” bug.
  • Fixed: drag & drop bug.
  • Fixed: parent settings.


  • Important improvements.


  • Fixed: background-image bugs.


  • New: table-cell for display property.
  • New: Drag & Drop support.
  • Improvement for width, animations and display properties.
  • background-image full-size bug fixed.
  • ContextMenu close bug fixed.
  • CSS Editor bug fixed.
  • Chrome transform bug fixed.
  • Measuring tool height bug fixed.
  • Slider value bug fixed.
  • Improvement to position property.
  • Jquery bugs fixed.


  • Improvement to undo/redo tools.
  • New: background image uploader.
  • New: color picker.
  • Improvement to text-shadow property.
  • New: CSS source manager.

4.3.5 Stable

  • New: new shortcuts.
  • Improvements to core functions.

4.3 Stable

  • New: undo/redo feature
  • New: material color palettes
  • Improvement to core functions.
  • New: new shortcuts
  • Fixed: some bugs.


  • Fixed: important bug.
  • Improvement performance.
  • Improvement for the core.
  • New: Fullscreen setting.
  • New: Pixel measuring tool.
  • Fonts Updated.


  • Fixed: some bugs.


  • New: CSS Animation property.
  • New: live CSS editor.
  • New: automatic prefix.
  • New: CSS filter property.
  • New: CSS text-shadow property.
  • New: box-shadow property.
  • New: box-sizing property.
  • New: transform property.
  • New: shortcut keys.
  • New: descriptions to some options.
  • SSL bug Fixed.
  • Fixed: some bugs.


  • Fixed: saving bug.


  • Improvements to core.
  • New: “export CSS code” feature.
  • Fixed: some bugs.


  • Improvements to core functions.
  • New: responsive support.
  • New: “select only this.”
  • Fixed: some bugs.


  • Improvements to the core.
  • New: 300+ background patterns
  • New: color palettes.


  • Improvements to make compatible with some themes.


  • Improvements to CSS selector.


  • Initial release