extension ExtPose

Live editor for CSS, Less & Sass - Magic CSS

CRX id


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 Live editor for CSS, Less & Sass - Magic CSS
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 ====+====+====+====+====+==== What some of our users say: Justin Hale - ★★★★★ "This extension is great! It allows me to pinpoint specific css modifiers to overwrite them properly." Johnny Petro - ★★★★★ "I would have never expected this: this extension has changed the way I write code. This basically turns Chrome into a live typesetting system. No more developing css in the chrome debugger. No more developing css in an IDE/editor. I feel like this turns Chrome into a word processor." Tanner Legasse - ★★★★★ "I use this plugin on a daily basis. I don't mean just once or twice in a day, I mean it makes 5 hours of work take 2 for me, and I use it constantly." Władzix - ★★★★★ "Incredible! Everything I was searching for, runs Live so you don't have to refresh every time you edit something, very nice suggestions while typing and other small features like colors are displayed in squares while typing names. One of the best features is auto enable on websites. I have made dark theme mode for some websites, thanks to this extension! Awesome!!!" ====+====+====+====+====+==== 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. Inspirations: * "Auto-generate CSS selectors with point-and-click" feature is partly inspired by the Chrome extensions SelectorGadget and Stylebot Alternative CSS development tools you may like if you are looking for features which are not yet available in Magic CSS: * Amino: Live CSS Editor * CSS Peeper * CSSViewer * Page Ruler Redux * PerfectPixel * Stylebot * Stylus * Viewport Resizer * VisBug * WhatFont 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-editorhttps://twitter.com/webextensions

Latest reviews

  • (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-06-13) Frank Lafortune (Faux Scout): Does not work at all.
  • (2023-05-22) Sandude: loved it great work
  • (2023-05-17) Baltazar Marechal: Muito bom!
  • (2023-04-13) Bahar Sales: Brilliant
  • (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-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; }
  • (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-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-10-08) Cornelius Kluge: Works wonderful, has a lot of options and handy tools. Can only recommend!
  • (2022-09-23) Stergios Pappos: I use it in all of my projects and love it!
  • (2022-09-16) Thanh Hiếu Võ: rất hay
  • (2022-09-04) reza makvandi: very helpful
  • (2022-08-28) Laura Timmel: I mostly love this extension, and have been using it for a few years with no issues, though now that I'm sometimes working on a secondary computer I'm going to have to hunt down an alternative extension. There's no way to sync custom code so it's accessible from multiple computers or across different Chromium-based browsers, and worse, there's no way I've been able to find to view all of the code you've added -- if you want to copy it from one computer to another, you have to remember all the websites you modified, then go to each one individually so you can access and copy its custom code. On the plus side, the extension is lightweight and easy to use, and has been stable and reliable in my experience. It also has a feature that I haven't been able to find in any other code injector plugin so far: drag-and-drop functionality for the code window. As I'm trying out alternative plugins, I'm really missing the ability to move the window so it's not blocking a part of the page that I'm trying to modify.
  • (2022-07-26) Ruben Fernandes: It's really nice to be able to do css developing with less directly on the browser
  • (2022-06-27) Whane The Whip: It's okay but it does not work with every site (does not open). Sadly this is the case for a site I need to edit colors on since I'm colored blind. Edit: I don't know what details you want. I already explained that your app does not open on all sites.
  • (2022-04-29) Tsutchi-ps: Chrome 100に更新してから、Webページを開いた後に自動で反映されないことが多くなりました。 DeepL / Since updating to Chrome 100, web pages are often not automatically reflected after opening.
  • (2022-03-19) Orest Tiny: Це просто фантастичний продукт, я спробував чимало додатків, цей найкращий!
  • (2022-02-08) 邱伟师: 初次尝试,感觉不错
  • (2022-02-02) Jean Fradet: Love the idea, but SASS isn't working :(
  • (2021-12-24) awe lotta: Basically I've been looking for a custom CSS injector and this is really great for that because I can't remember any of the syntax/keywords and have to use trial and error. The selector selector is a plus
  • (2021-12-04) Ashish Dwivedi: Loved It
  • (2021-12-01) John Smith: Injects itself into the page which can cause various type of conflicts. Not the best decision. Would have been great extension otherwise.
  • (2021-09-20) DeepakKumar Yadav: Great app. Works like a charm. sometimes the predictions feel awkward as they block your typing. But thats fine. Btw if you can spend a minute and change the icon color in Chrome toolbar. it would be great. The Chrome toolbar is white and the icon color is also white. So it appears empty there and makes it hard to recall what extension is actually there.
  • (2021-08-31) felipe gabriel: top!
  • (2021-08-25) Alexandr Fletch: Really the best one. Thanks for useful tool!
  • (2021-08-19) Zsolt Szabo: After turning on "Allow access to file URLs" in the extension's options, when I try to enable "apply style automatically" on a local html file, thee extension returns the following error: "you need to provide permissions to reapply styles automatically." I'm not sure what it means by that, as the statement is very vague. I believe it used to be able to do this, so I'm guessing something changed in Chrome's security model, since I last used this functionality.
  • (2021-08-12) Do Trinh: nice ext
  • (2021-07-30) Amirali Bigdeli: i enjoy to use this Program
  • (2021-06-17) Richard Cote: I'm revisiting this after having tried it a long time ago. The separate window is a huge improvement, and the preprocessor support is terrific.
  • (2021-06-13) Kenny Wind: Awesome extension! Improved my development efficiency
  • (2021-06-11) Felipe Bayona: this extencion Is amazing
  • (2021-06-08) Dustin Tantum: While there are other realtime CSS editors available... this one is by far my favorite. Not only is this a GREAT tool for writing, editing, beautifying/minifying CSS, but it also supports persistent site-by-site CSS customizations as well! Additionally, the developers are very active in its continued development and responsive to good feature requests!
  • (2021-06-05) Ashish Kumar Burnwal: This is very use full if you want customize view.
  • (2021-06-02) Vasiliy Leytman: A bit more modern look could add up, but all in all, it's a great little exension!
  • (2021-05-20) nhungo duc: a great tool. if you add the convert css to less part, it's even better. Thank you publisher
  • (2021-05-18) Feraidoon Mehri: The buttons in the top-right bar are buggy and sometimes are invisible, though they can be clicked. The style pinner shows a notification on page load which is annoying. It's better to change the icon of the extension to indicate active style injection (see Stylus). Otherwise, great extension!
  • (2021-05-15) 庞日升: nice
  • (2021-05-06) Hao Liu: Great!
  • (2021-04-29) Theo Kondakos: Been using this plugin for about 4 years now. It helped me write code much much faster, cleaner. The fact that it allows me to write SCSS on the fly is also amazing. The only issue that I face, is while developing smaller screens. The plugin starts behaving a bit wierdly, you can't copy/paste via shortcuts, you can't select all your code to copy if it's too long, and stuff like that. My guess is that these technical difficulties are inherent to the approach the plugin has by being part of the DOM. The new approach, that the plugin opens in a new window solves this downside. I wish it can support SCSS too in the future. That would be super awesome.
  • (2021-04-28) Jonatan Ro: Very useful, thank you! :)

Latest issues

  • (2023-08-02, v:8.21.3) NGC: cant run on edge
    my computer is so bad the only browser it can run is microsoft edge, your css editor is the best one out there so i really need it. But it says its uncompatible and my computer does not download google chrome, it just doesnt. can you please update it for things less than update 102? it would help a lot.
  • (2023-08-02, v:8.21.3) Kavinder Rawal: Shortcut to open the extension on Mac(Chrome)
    Hi what is the shortcut to quickly open the extension on Mac?
  • (2023-06-28, v:8.21.3) Tom Bristol: Color Picker Not Working
    The color picker isn't working in this release. Per github, it was fixed but I don't think it was updated here in the Chrome store.
  • (2023-02-22, v:8.20.1) f systems: Not works
    hi. seems on latest updtafe of chrome the extension doenst work. i click on it and it doenst do anything. it doesnt open
  • (2022-12-09, v:8.20.1) Scotty Fitz: Code /region collapsing
    First of all - This extension has totally changed the way I work - Thank you SO MUCH ! Is ther an option that I haven't found that enables code / region collapsing as per a lot of IDEs ? It would make my sass coding even easier !
  • (2022-08-30, v:8.18.6) Peter: Comment Shortcut
    It would be nice if you add a feature that you can press a shortcut while editing and the selected lines get a "//" at the start and the lines where at the start "//" is will remove this. If you implement it please make the shortcut changeable (in other programs i use "ctrl+y" (QWERTZ-Keyboard)).
  • (2022-08-03, v:8.18.3) Nobody: Code Disappeared
    Hi, I've been using your extension for a while and I absolutely love it! Yesterday though a domain / page in which I use your extension changed urls (from http to https) and so the code that was previously saved and always showed up, disappeared. Since it was very important code and memo written there, there is a way to recover it somehow? ;w; Thanks for your time!
  • (2022-06-19, v:8.18.3) Rashedul Islam: web devoloper
    i cannot know about this side plese explene it.
  • (2021-12-17, v:8.17.0) Zhan Arno: Add word wrap option
    Hello, please add word wrap option.
  • (2021-10-06, v:8.17.0) Justin Prevatte: Missing options from the editor window
    I'm loving this extension. A few days ago, the options in the top-right of the editor window (..., pin, reload, etc) all disappeared. I didn't change any settings and have tried removing and re-adding the extension, but they seem to just be gone now. Is this just me, or have these options been removed? Thanks!
  • (2021-06-22, v:8.17.0) T K: Import SCSS files to Live CSS Editor through @import
    Hello, I am loving this extension, probably made my workflow a thousand times faster and clearer. Now, I got a question. I am mostly writing SCSS, and I have some kind of personal utility classes and mixins library, and I was wondering if there is a way to load these files into my Live CSS editor through an @import (or @use) command. I tried placing my files (partials etc) to the server, and then using an @import + url to load the one file that loads the rest but it didn't work. My thought was to load all my scss code to Live CSS extension, and then use my variables and mixins in the Live CSS extension. Thanks in advance
  • (2020-10-08, v:8.5.1) Nikodemsky: scroll problem
    The scroll tends to "acting up" means - when i'm scrolling on mouse then active window is scrolling maybe 0.5mm per full scroll(it's really weird) - it's kinda like it wants to force smooth scroll. Anything can be done about that?
  • (2020-10-08, v:8.5.1) Nikodemsky: dark theme?
    Any chance for dark mode/theme? I'm used to sublime(and i'm pretty sure tousands of other people too) and suddenly coding in light-color-based editor is kinda problematic :x
  • (2020-09-11, v:8.3.0) Nathan Swafford: Issue with line spacing and cursor for last week or so.
    I'll try and describe the issue as best I can. It works but there are white lines between the lines off CSS and the cursor is huge. At first I thought I may have changed a setting but I've looked. This is on Mac in Chrome. Here is a link to a screenshot https://i.imgur.com/IbuOPWr.png
  • (2020-02-07, v:7.0.10) LPP: Color Editing Tool Not Working
    When I try to open the color tool menu by clicking on the square to the left of a color hex, it brings up the menu but without any of the buttons and sliders, only a blank white rectangle. At the top is the color gradient graphic which I am unable to interact with. I tried uninstalling and reinstalling the extension from chrome, I tried rebooting chrome, and I tried restarting my computer but none of these fixed the issue.
  • (2020-01-13, v:7.0.7) Ben Cheshire: Custom CSS for iframes overwrites the parent page's CSS too
    When working in an iframe, if the parent page is refreshed, the custom CSS for the parent page will sometimes (but not always) be overwritten by the iframe's CSS. It's just a minor annoyance for me as I don't need the parent page to have custom CSS, so I just remove the entire block every time it happens. There was one occasion where the parent frame's CSS overwrote the iframe's CSS, luckily I already had a backup of the stylesheet.
  • (2019-12-31, v:7.0.7) Tojanna Creative: i cannot connect to the live css server
    i cannot connect to the live css server, how to resolove ?
  • (2019-12-08, v:7.0.7) Мастер Дарий: sync or export
    Please add sync or export.
  • (2019-08-19, v:7.0.7) Simon Edwards: URL changed, cannot access my code to copy/restore it to the new URL
    Hello, Love the extension, I've been using it for a very long time. I'm running into an issue where the URL of a website I've heavily customized has changed its URL e.g. example1.domain.com to example2.domain.com which means all of my CSS got reset. Is there any way for me to access my old CSS which is still stored on example1? I cannot get to the old URL as it immediately redirects to the new URL so I'm a bit stuck, and I've got about 8 months worth of CSS stored in there. Kind regards, Simon
  • (2018-12-24, v:7.0.7) Thanks for the awesome extension
    Please add reset option to extension main menu ,because I typed this `body{display:none}`
  • (2018-08-04, v:7.0.0) How can I edit the css for an iframe?
    I have ticked the 'Load for frame/iframe' option, but I still get only one instance of the editor for a page which contains iframes, and I can't select elements within the iframe.
  • (2018-07-10, v:7.0.0) Refano Pradana: can it block magnifier glass ui?
    Can it block magnifier glass ui in ebay, amazon, aliexpress. Whenever I view the product viewer, the annoying jquery block the image.
  • (2018-06-12, v:7.0.0) Load current css file to edit
    Perhaps I'm overlooking this feature, but is it possible to load the current .css file on a webpage to quickly make edits?
  • (2018-03-24, v:6.2.25) webdeve deveweb: Mobile responsive problem
    Very cool plugin but when you use it for responsiveness of you can't move the location of the css editor
  • (2018-01-24, v:6.2.23) Aviad Priel: import sass files
    i give 10 stars if is a way to import sass from file to import the mixns and the variables
  • (2018-01-05, v:6.2.22) Ammi Said: Thank
    Thank very lot !!!
  • (2018-01-03, v:6.2.22) Andrew Nyland: Please fix
    This is useless if it can't run in extensions.
  • (2017-11-18, v:6.2.22) Omid Rahmani: magic css android
    magic css android ???


72,316 history
4.6 (246 votes)
Last update / version
2023-04-18 / 8.21.3
Listing languages