Stylizer Features

Real-time CSS

Immediate feedback saves countless hours.

  • Say goodbye to the reload button!

    In Stylizer, your changes are immediately displayed in all browsers, in real-time—literally as you type or move the mouse. This is a substantial productivity boost for designers of all skill levels.

    ↑ Back to top
  • Size faster with grips

    Size Grips allow you to accurately resize any CSS dimension by clicking and dragging the mouse. Click, hold, and drag—watch your page update in real-time and achieve perfection on your first try.

    Take the guess work out of sizing. Find the exact spot where that stubborn div wraps. Or use them to perfectly position a background image. Show me more

    ↑ Back to top
  • Two-click color changes

    Tweak any color in your style sheet to find the perfect hue, saturation and luminance level for that exact look, in just two clicks: one click on the CSS declaration, another on the color picker which appears automatically.

    Stylizer provides two HSL-based color pickers and an opacity channel slider that generates RGB-based colors that work even on legacy browsers. Never guess another hex color code ever again! Show me more

    ↑ Back to top
  • Take control of repetitive tasks

    The Remote Control makes many repetitive tasks a one-click operation. Most buttons here double as size grips, allowing you to save time with maneuvers like, for example, mousing down on the "background-position" button to insert a new declaration and starting to adjust it immediately by dragging the mouse.

    It's intelligent, too: when a declaration is already present, its button appears pressed, and Stylizer will adjust what you have instead of inserting. Or, right-click on a pressed button to delete a declaration without even looking for it. Show me more

    ↑ Back to top
  • Write error-free CSS

    Stylizer knows all the latest CSS 3 standards, and provides a real-time Warnings list that updates without delay, as you type. You'll also see a subtle red underline wherever your CSS does not validate. Stylizer even recognizes many common CSS "hacks" to ensure that the Warning list only contains actionable errors. Show me more

    ↑ Back to top

See how the code grid makes you more productive than ever...

  • In this 3 minute video:
  • Learn to use the code grid like a pro
  • Learn to quickly resize and move elements using Size Grips
  • Learn the 4 most useful keyboard shortcuts for entering new CSS
  • See why Remote Controls are productive for both beginners and experts
This video was made for Stylizer 5. Please bear with us while we update our videos for Stylizer 6.


Space bar, click anywhere, style anything.

  • Say hello to your new styling workflow

    Bullseye transforms your workflow into an efficient point, click, and edit process. Using Bullseye is as easy as tapping the space bar, and clicking on the page element that you want to style. All matching CSS rules appear with the most specific rules appearing at the bottom of the list. Show me how

    ↑ Back to top
  • Follow the breadcrumbs

    When you use Bullseye, the path of HTML tags leading to the target element is displayed across the bottom of your screen in the Breadcrumb. Use it to select container elements or create new rules with a single click. Show me how

    ↑ Back to top
  • Stakeout: Reverse Bullseye

    Whereas Bullseye displays a list of CSS rule that affect a page element, Stakeout outlines the page elements that are being affected the CSS rule you are currently editing.

    With Stakeout turned on, you'll know which elements are going to be affected by a change before you make it. Show me how

    ↑ Back to top
  • Coming soon to Stylizer 6
    Find and replace

    Stylizer also packs a powerful real-time search feature to quickly finds CSS rules based on textual searches. It even understands CSS syntax: for example, typing "p" will match every selector which includes a P tag—not every “p” in your entire style sheet! It also provides text replacements and renames CSS classes and IDs with preview for simplified refactoring.

    ↑ Back to top

See how Bullseye lets you style any part of a page...

  • In this 2 minute video:
  • Find the CSS targeting any element using Bullseye
  • Visualize HTML structure and create new rules with the Beadcrumb
  • Outline the elements a CSS rule is affecting with Stakeout
  • Find and replace code in a style sheet
This video was made for Stylizer 5. Please bear with us while we update our videos for Stylizer 6.


No nonsense—just open a URL and start working.

  • Start with your website

    Enter the address of any website in Stylizer to start editing the CSS. Or load an HTML page directly from your Mac or PC. Linked CSS files open automatically in Stylizer so you can start editing right away. Show me how

    ↑ Back to top
  • Switch between integrated browsers

    One click is all it takes to switch between any of Stylizer's integrated browsers. Stylizer automatically injects your changes into the new browser so you can switch browsers while your work is in progress and not yet saved.

    You can even open your page in up to three preview panes at the same time for side-by-side comparisons, making responsive and cross-browser testing a breeze. Show me how

    Stylizer includes embedded preview panes for all major browsers: Firefox, Chrome, Internet Explorer (on Windows), and Safari (on Mac).

    ↑ Back to top
  • Save it back instantly

    Stylizer saves your CSS back to its original location by FTP, SFTP, FTP/SSL or directly to a hard drive or network share. Plus, it remembers where remotely loaded CSS files were last saved, so you only need to choose the location once. Show me how

    ↑ Back to top
  • Compatible with your stack

    Stylizer uses no project or temporary files, and works out of the box with almost any website. It works with CMS products like WordPress, Joomla, and Drupal. And it is compatible with practically every web framework: Rails, PHP, ASP.NET, node.js—you name it.

    ↑ Back to top

Just how easy is it to start editing a website in Stylizer?

  • In this 1 minute video:
  • Open a website and all linked CSS files
  • Set CSS formatting options
  • Save CSS files back to your hard disk or a FTP server
This video was made for Stylizer 5. Please bear with us while we update our videos for Stylizer 6.


Everything you need to achieve pixel perfection.

  • Eye Dropper

    Pull colors from Photoshop, a web page, or any other app, preview them in real-time, and immediately inject them into your CSS.

    ↑ Back to top
  • Tape Measure

    Take and insert measurements from design mockups anywhere on your screen (or even on the page you're styling). The tape measure follows your mouse and works like a real tape measure on your screen.

    ↑ Back to top
  • Lasers

    Laser-like guidelines follow your mouse to help you ensure the elements on your page are properly aligned, and display measurements in a digital readout.

    ↑ Back to top
  • Lens

    Ensure per-pixel accuracy by blowing up a portion of the browser by 8 times its original size. The lens can either follow your mouse or be locked in place.

    ↑ Back to top

See how you can be pixel perfect...

  • In this 1 minute video:
  • Grab a color from your screen using the Eye Dropper
  • Align and measure page elements with the Ruler
  • Zoom in on part of a webpage with the Lens
This video was made for Stylizer 5. Please bear with us while we update our videos for Stylizer 6.


A wealth of productivity at your fingertips

  • Customizable formatting

    Stylizer guarantees that your style sheet will be beautifully formatted when saved, using your preferred style (spacing and tabs, indentation, line endings, maximum line length, etc). Working with minified CSS is no different in Stylizer—CSS appears as you would expect in the Code Grid, and minifies again automatically when saved.

    Formatting presets can be saved, and each individual style sheet can use its own formatting style, making it effortless to work simultaneously on multiple projects with different requirements.

    ↑ Back to top
  • Copy and paste as text

    Although Stylizer presents CSS in the Code Grid, you may simply copy and paste between Stylizer and other applications as though it were an ordinary text editor. CSS is always copied in your preferred formatting style, so you'll never need to waste time reformatting CSS again.

    ↑ Back to top
  • Drag and drop

    Simply hold Ctrl (Command on Mac), click, and drag to reorder declarations and rules, or move them between style sheets or between applications. The "plus" button on the Remote Control supports drag-and-drop as well, so you can insert a new line without touching the keyboard.

    ↑ Back to top
  • Made for keyboard junkies

    We've made every effort to accomodate even the most die-hard emacs fanatic with a personal collection of IBM Model Ms (you know who you are). Efficiently control all of Stylizer and your CSS without going anywhere near a mouse.

    ↑ Back to top
  • Shortcut properties

    Stylizer includes a set of unique, built-in shortcut properties that generate CSS declarations for you, making it easier to write correct cross-browser CSS. How shortcut properties work

  • Single-click Clearfix

    Clearfix is a technique that web designers use to ensure that a container element expands to contain all of its floating children. Stylizer streamlines this process by generating all of the necessary CSS for you with a single click. How clearfix works

  • More intuitive positioning

    Stylizer can package the most difficult aspects of CSS positioning into a single intuitive shortcut property. How positioning works

    ↑ Back to top
  • Unintrusive auto-complete

    Stylizer subtly suggests CSS property names, keywords and units as you type. It even recognizes hyphenated keywords, allowing you to type shortened CSS like p-t:2 instead of padding-top: 2px.

    ↑ Back to top
  • Offline support

    Real-time preview is wonderful, but there are times when you need to open a CSS file to make a quick edit without opening a website. Stylizer's flexible UI works just as well as an offline editor, providing the same great editing experience even without a preview pane open.

    ↑ Back to top

Download your free trial now.

No signup. Installs in seconds. Smooth first run experience.