Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Live editor for CSS, Less & Sass (Magic CSS)

Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox and Opera.

Google Chrome Logo

Microsoft Edge Logo

Mozilla Firefox Logo

Opera Logo

Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, convert Less/Sass to CSS, beautify, minify, CSS reloader, linter, ...

Run this extension and start writing your CSS/Less/Sass code which gets applied immediately. The code you write will be saved in the browser extension's storage space or the site's local storage.


  • Live editor for CSS/Less/Sass code - Preview changes as you write code
  • Live edit CSS files and auto-save on file system
  • CSS reloader
  • Option to reapply styles automatically
  • Syntax Highlighting
  • Auto-generate CSS selectors with point-and-click
  • Autocomplete for CSS selectors, properties and values
  • Emmet support helps in quickly expanding abbreviations to CSS code (
  • Color picker (supports HEX, RGB, RGBA, HSL and HSLA)
  • Convert code from Less/Sass to CSS
  • Beautify / Format code
  • Minify code
  • Highlight DOM elements matching the CSS selectors
  • Option to load this extension in iframes as well
  • Lint CSS code

Open source:

This extension is available for:

  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
  • Opera

Visit for further details

Created by:

  • Priyank Parashar


  • No need to refresh pages to test your CSS/Less/Sass code
  • Auto-save your changes to filesystem as you write the code
  • Reload CSS resources without refreshing the page
  • Speed-up development and testing of your styling code by doing it directly on your page
  • Develop and test your code before finalizing your changes into the project files
  • Apply some temporary styles (like hiding some components)
  • Test styling changes even when you cannot modify the original source code


  • The CSS/Less/Sass code you write gets applied as you write it
  • The CSS reloader watches CSS files and live updates them immediately
  • The Sass parser is loaded remotely from
  • With this styling code tester, you can develop and test the code at the same time
  • The code is saved in browser/file as soon as you write it
  • The code editor is resizable and draggable
  • The code you write is auto-saved at site level and can be used again for same or different pages
  • You can use "TAB" key to indent your code
  • Running Magic CSS again, while it is already loaded, will restore it to its original position and size
  • Press "Esc" or click on close to hide it and run it again to continue making changes
  • The code you write is added at the bottom of the <body> tag of the active page
  • It includes CSS/Less/Sass beautifier
  • It includes CSS minifier
  • It highlights the DOM elements matching the CSS selectors
  • Use it along with your favorite Chrome/Edge/Firefox/Opera Developer tools
  • You might find it useful in creating your custom themes for websites based on Stylish / Stylist
  • This extension was previously known as "MagiCSS - Live CSS Editor"

Credits for open source code used by this extension:


  • "Auto-generate CSS selectors with point-and-click" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot


Connect with us:


Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)







No packages published