YellowPencil – Visual CSS Editor

Version 7.4.1 is out! – The last update was released on 22 March 2021

YellowPencil is a WordPress CSS style editor plugin that allows you to customize your website design in real-time.

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.

YellowPencil - Visual CSS Style Editor - 8

Visual CSS Editor

YellowPencil provides everything that you need for customizing your site design. The plugin comes with advanced features like visual resizing, drag & drop, measuring tool as well as a ton resource that background patterns, google fonts, and trend color palettes also it has an advanced responsive tool which allows you customize your site for any screen size.

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
Animation manager
Animation generator

Design Assets

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

800+ Google fonts
300+ Background patterns
Unsplash background stock images
Material and flat color palettes
50+ Animations

CSS Properties: Text

Font Family
Font Weight
Color
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
Background Image
Background Clip
Background Blend Mode
Background Position
Background Size
Background Repeat
Background Attachment

Other CSS Properties

Margin
Padding
Border
Border Radius
Position
Width
Height
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.

Documentation and Support

For documentation and tutorials go to our Documentation.
If you have any more questions, visit the Support forum.
For more information, check out our website at YellowPencil Visual CSS Style Editor.