Description from extension meta
Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, Less/Sass to CSS, beautify, CSS reloader, lint, ...
Image from store
Description from store
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.
Featuring:
✓ Live editor for CSS/Less/Sass code - Preview changes as you write code
✓ Autocomplete
✓ Live edit CSS files and auto-save on file system
✓ Open code editor in external window
✓ CSS reloader
✓ Option to reapply styles automatically
✓ Syntax Highlighting
✓ Auto-generate CSS selectors with point-and-click
✓ Emmet support
✓ Color picker
✓ 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
✓ Get SVG icons
✓ Lint CSS code
This extension is available for:
✓ Google Chrome
✓ Microsoft Edge
✓ Mozilla Firefox
✓ Opera
Open source:
✓ https://github.com/webextensions/live-css-editor
====+====+====+====+====+====
You might want to use it for:
➤ 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 by writing code directly on your page
➤ Develop and test your code before finalizing your changes
➤ Apply some temporary styles (like hiding some components)
➤ Do CSS changes on any website
Notes:
➤ The CSS/Less/Sass code you write gets applied as you write it
➤ The CSS reloader watches CSS files and live updates them immediately
➤ You can develop the code and see the output at the same time
➤ The code is saved in file/browser as soon as you write it
➤ The code editor is draggable and resizable
➤ Use code editor in external window for developing responsive pages
➤ The code you write is auto-saved for the site
➤ You can use "TAB" key to indent your code
➤ Running Magic CSS again, while it is already loaded, disables the code
➤ Press "Esc" or click on close to hide it
➤ The code is added at the bottom of the <body> tag
➤ It includes CSS/Less/Sass beautifier
➤ It includes CSS minifier
➤ It highlights the DOM elements matching the CSS selectors
➤ Use it along with 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"
Security and privacy:
ⓘ No permissions approval is required for installing the extension
ⓘ For advanced features, like "Apply styles automatically", permissions are requested on-demand
ⓘ Mixpanel is used to get anonymized stats for improving UX
ⓘ Browser extension's storage, localStorage etc are utilized for the extension's core features.
Visit https://webextensions.org/ for further details.
Created by:
➤ Priyank Parashar - https://linkedin.com/in/ParasharPriyank/
Connect with us:
➤ https://webextensions.org/
➤ https://github.com/webextensions/live-css-editor
➤ https://twitter.com/webextensions
Latest reviews
- (2025-04-24) Matthew Wright: This one is the best. THE only editor I've found that you can move around! So many other extensions get in the way of styling because you can't move them around. :-)
- (2025-04-21) Ignacy: awesome for fixing poor css on websites
- (2025-03-11) Sulejman Cikaric: Simple, "it just works".
- (2025-01-13) Viet Le: This was my goto, but had to remove it because of the annoying little notification that tells me I have autoloading CSS Pinned ruins some of our screen captures. It shows on every refresh for whatever reason. Which it would just stay docked to the extension icon. If you don't need to load any local CSS and screen record at the same time, then this is for you though.
- (2024-12-22) Dave Smith: Great
- (2024-10-19) Jovan Ralić: Works great. Probably the best custom CSS extension. I'm reinstalling my OS. Where can I find the CSS files, so that I can save them?
- (2024-08-08) Austin Rivers: Have loved this tool however it has not been working for me on specific websites (unfortunately the ones I happen to use it the most on). Would love if I could get some support regarding this possibly to see if there is a way to fix or work around this. Otherwise fully recommend and a great tool!
- (2024-07-14) Michael: Thanks for making my life easier.
- (2024-06-07) Tony Boswell: Would have given you a 5 start but what Happened to Dark Mode?
- (2024-01-31) Masoud Tanha: Makes the life easier! :D
- (2024-01-31) Masoud Tanha: Makes the life easier! :D
- (2024-01-15) Ayyappa J: Amazing!
- (2024-01-15) Ayyappa J: Amazing!
- (2023-12-06) Vũ Quang Nam: Best
- (2023-11-21) Reiniel Tredes: Best
- (2023-11-21) Reiniel Tredes: Best
- (2023-09-28) ThatWeirdGuy: This is A LOT BETTER than using Stylus or Stylebot, I think it did exactly what I wanted it to do Mainly for me to practice css I really appreciate this thing exists because it was just really annoying to find out what would work best for me but I already really like it after using it for like 3 minutes because I place my code in just to see if it'd work and I love it. I'm going to tell other people about this extension it is really helpful and I'm probably gonna write in other reviews that is probably a better alternative then Stylebot or Stylus, they're either very complicated to use or they just don't work anymore for some reason. Thank you for making this and I'm glad I was able to stumble upon this.
- (2023-09-28) ThatWeirdGuy: This is A LOT BETTER than using Stylus or Stylebot, I think it did exactly what I wanted it to do Mainly for me to practice css I really appreciate this thing exists because it was just really annoying to find out what would work best for me but I already really like it after using it for like 3 minutes because I place my code in just to see if it'd work and I love it. I'm going to tell other people about this extension it is really helpful and I'm probably gonna write in other reviews that is probably a better alternative then Stylebot or Stylus, they're either very complicated to use or they just don't work anymore for some reason. Thank you for making this and I'm glad I was able to stumble upon this.
- (2023-09-12) minh quan nguyen: good extentions
- (2023-09-12) minh quan nguyen: good extentions
- (2023-08-13) satoru kurita: 基本的に素晴らしい。 ただ、アンドロイドスマホにおいて、kiwiブラウザ上で使おうとしたら、styleのreapplyを自動で行うことができない。 どの様に権限を付与したらいいのか教えてほしい。
- (2023-07-14) Space Dorito: Really amazing! it's so much easier to make themes for websites with this!
- (2023-07-14) Space Dorito: Really amazing! it's so much easier to make themes for websites with this!
- (2023-06-13) Frank Lafortune (Faux Scout): Does not work at all.
- (2023-06-13) Frank Lafortune (Faux Scout): Does not work at all.
- (2023-05-22) Abdullah Alary: loved it great work
- (2023-05-22) Abdullah Alary: loved it great work
- (2023-05-17) Jacu: Muito bom!
- (2023-04-13) Bahar Sales: Brilliant
- (2023-04-13) Bahar Sales: Brilliant
- (2023-04-09) HeRuHaiLiu Huang: dont know how to use it, give a ok rating.
- (2023-04-09) HeRuHaiLiu Huang: dont know how to use it, give a ok rating.
- (2023-04-06) Peter Boulton: Really neat way of trying out design alternatives for my website without the complexity of browser development tools, and the ability to toggle the changes to see the differences. A keeper!
- (2023-04-06) Peter Boulton: Really neat way of trying out design alternatives for my website without the complexity of browser development tools, and the ability to toggle the changes to see the differences. A keeper!
- (2023-03-01) Sheena Tuazon: This is amazing and there's like no other! It saves even when refreshed. Thank you so much!
- (2023-03-01) Sheena Tuazon: This is amazing and there's like no other! It saves even when refreshed. Thank you so much!
- (2023-02-28) Jovan Ralic: Best one I found! Just wish it would sink the data to my account, so that it's available on my other machine right away.
- (2023-02-25) yassine: les fonctionnalités sont dures à trouver mais c'est pile ce qu'il me fallait - tu peux laisser l'extension générer le code lié à un élément de la page en le sélectionnant (l'icône à gauche de la croix en haut à droite) - et avec l'épingle (à gauche des 3 points) tu peux automatiquement appliquer le style au chargement de la page (c'est lié au domaine donc tout le site pas à une seule page) sans devoir lancer l'extension
- (2023-02-04) Erick: Es muy buena extension para personas que saben utilizar css, en lo personal me ha gustado muchisimo.
- (2023-01-01) Avri Rotner Law.: I put a few CSS lines here for the appearance of the panel of the plugin itself, to adjust it to 2023... I'm sure you'll know how to do it even more accurately than me, and that's very important! The functionality of the plugin is excellent, but its appearance is antique... I put these lines in a plugin on every website, and that's how I get an up-to-date look, I'd be happy if you put this css in by default. {I don't speak English so I translated my message with Google, I'm sure you'll forgive me for the language gaps} /*חלון התוסף*/ #MagiCSS-bookmarklet{ padding: 0px 1px !important; box-shadow: 0px 0px 92px rgba(0,41,89,0.17) !important; background: rgba(255,255,255,0.44) !important; backdrop-filter: blur(30px) !important; border-radius: 15px !important; } #MagiCSS-bookmarklet > div.raw-codemirror-container > div { font-family: 'rubik' !important; } #MagiCSS-bookmarklet > div.raw-codemirror-container > div{ background: rgba(255,255,255,0.02) !important; padding: 15px 15px 15px 15px; } #MagiCSS-bookmarklet > div.magic-css-header > div.magic-css-header-left-section > div > div{ background-color: #020b60 !important; border-radius: 15px; padding: 0px; font-family: 'rubik' !important; } #MagiCSS-bookmarklet > div.magic-css-header{ padding: 8px 15px 0px 15px; } #MagiCSS-bookmarklet > div.raw-codemirror-container > div > div.CodeMirror-scrollbar-filler{ background: rgba(255,255,255,0.02) !important; } ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track{ border-radius: 10px; }
- (2023-01-01) Avri Rotner Law.: I put a few CSS lines here for the appearance of the panel of the plugin itself, to adjust it to 2023... I'm sure you'll know how to do it even more accurately than me, and that's very important! The functionality of the plugin is excellent, but its appearance is antique... I put these lines in a plugin on every website, and that's how I get an up-to-date look, I'd be happy if you put this css in by default. {I don't speak English so I translated my message with Google, I'm sure you'll forgive me for the language gaps} /*חלון התוסף*/ #MagiCSS-bookmarklet{ padding: 0px 1px !important; box-shadow: 0px 0px 92px rgba(0,41,89,0.17) !important; background: rgba(255,255,255,0.44) !important; backdrop-filter: blur(30px) !important; border-radius: 15px !important; } #MagiCSS-bookmarklet > div.raw-codemirror-container > div { font-family: 'rubik' !important; } #MagiCSS-bookmarklet > div.raw-codemirror-container > div{ background: rgba(255,255,255,0.02) !important; padding: 15px 15px 15px 15px; } #MagiCSS-bookmarklet > div.magic-css-header > div.magic-css-header-left-section > div > div{ background-color: #020b60 !important; border-radius: 15px; padding: 0px; font-family: 'rubik' !important; } #MagiCSS-bookmarklet > div.magic-css-header{ padding: 8px 15px 0px 15px; } #MagiCSS-bookmarklet > div.raw-codemirror-container > div > div.CodeMirror-scrollbar-filler{ background: rgba(255,255,255,0.02) !important; } ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track{ border-radius: 10px; }
- (2022-12-09) David S: Absolutely great, and my current weapon of choice ( because of the autocomplete and color display ). Previously i was using 'user CSS'. However, when using an external window ( absolute necessity for working on mobile designs ), as you change each page, the external window loses sync with the browser and your changes will not be saved or previewed. Thus you have to click the extension icon, move a window back over to the side, and rinse repeat for each page change. That slows me down :( For the record i'm using windows 10 And Google Chrome Version 108.0.5359.73 (Official Build) (64-bit). I would be willing to help the developer diagnose this as the problem is almost a 'game breaking bug'!
- (2022-12-09) David S: Absolutely great, and my current weapon of choice ( because of the autocomplete and color display ). Previously i was using 'user CSS'. However, when using an external window ( absolute necessity for working on mobile designs ), as you change each page, the external window loses sync with the browser and your changes will not be saved or previewed. Thus you have to click the extension icon, move a window back over to the side, and rinse repeat for each page change. That slows me down :( For the record i'm using windows 10 And Google Chrome Version 108.0.5359.73 (Official Build) (64-bit). I would be willing to help the developer diagnose this as the problem is almost a 'game breaking bug'!
- (2022-12-09) Scotty Fitz: A fantastic plugin that I have been using for 6+ months now. I've been waiting for some "gotchas" but this extension has yet to disappoint. Absolutely brilliant - thank you !!
- (2022-12-09) Scotty Fitz: A fantastic plugin that I have been using for 6+ months now. I've been waiting for some "gotchas" but this extension has yet to disappoint. Absolutely brilliant - thank you !!
- (2022-11-30) Острый Перчик: По сравнению с другими подобными расширениями, этот лучший выбор. Но не хватает контекстного подбора параметров стилей uwu.
- (2022-11-16) Maxwell Hibbert: Works really well overall. The only issue I have is when editing in an external window, the plugin has to be loaded again after refreshing the page I'm styling, and then I have to close the old editor. That quickly gets tedious.
- (2022-11-16) Maxwell Hibbert: Works really well overall. The only issue I have is when editing in an external window, the plugin has to be loaded again after refreshing the page I'm styling, and then I have to close the old editor. That quickly gets tedious.
- (2022-10-08) Cornelius Kluge: Works wonderful, has a lot of options and handy tools. Can only recommend!
- (2022-10-08) Cornelius Kluge: Works wonderful, has a lot of options and handy tools. Can only recommend!