Yellow Pencil: Visual CSS Style Editor

Yellow Pencil: Visual CSS Style Editor

WPMeta Score

Did you know?

Plugin Popularity 4.0
Author Activity 2.7
  • 🎖 Plugin ranks 8,627 amongst 50,000+ plugins.
  • 🎂 This plugin is going to celebrate it's 7th anniversary after 4 months.



What is this?

Yellow Pencil is a visual Style Editor WordPress plugin that you can use with any theme and plugin to make customizing your website much easier. Customize your WordPress site in minutes. Fonts, Colors, Animations and more. Keep the site design under your control with 100% front-end Style Editor.


Yellow Pencil lets you customize any element in your website. Click any element and edit colors, fonts, sizes, positions and a lot more styles. Yellow Pencil has more than 50 properties and also coming with advanced tools.

Visual Editor

You don’t know about CSS? No problem, It’s has simple visual controls. Yellow Pencil will create CSS styles in the background while you playing with colors as the game.

CSS Editor

Yellow Pencil developed for both beginners and advanced users. No code knowledge required but there is still a good CSS Editor for those who would like to coding! You can coding live with CSS editor and interfere generated CSS rules.

Live Drag & Drop Any Element

Drag & Drop any element in real-time, move the elements to any position you want.

Resize Elements Live

Edit the element width and height from options or resize any element real-time.

Visual Animation Generator

Create custom animations with the scenes! Animation generator will be recording your moves as an animation! Add more scenes, more styles and have fun! Provide mobility for your website with your own special animations!

Visual Animation Manager

Manage all Yellow Pencil animations! Use 50+ ready-to-use animations or use your custom own animations. Control animation durations and delays. Animation manager supports multiple animations! Yay! This is a unique feature on web technology, even you can create HTML/CSS based movies with Yellow Pencil.

Key Features

  • 600+ Font families
  • 300+ Background patterns
  • Trend color palettes
  • Measuring tool
  • Animation generator
  • Animation manager
  • Responsive support
  • Hover & Focus selectors
  • Selector search tool
  • Drag & Drop feature
  • Wireframe mode
  • 50+ Animations
  • Smart guides
  • Design information
  • Color picker
  • CSS3 filter effects
  • 50+ CSS properties
  • Support custom selectors
  • Live Resizer
  • Live CSS Editor
  • CSS Manager
  • Undo & Redo feature
  • Clean CSS output
  • Customize any page
  • Automatic Update
  • Shortcuts
  • Well Documentation

See what you?re missing! try it now on plugin website.