Live editor for CSS, Less & Sass - Magic CSS

ifhikkcafabcgolfjegfcgloomalapol

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

Latest reviews

• (2024-01-31) Masoud Tanha: Makes the life easier! :D
• (2024-01-15) Ayyappa J: Amazing!
• (2023-11-21) Archicoders Archicoders: Best
• (2023-09-28) ThatWeirdGuy Op: 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-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) Abdullah Alary: 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!

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 ???