CSS Shapes Editor

Download / Install How to install an extension

CRX id

nenndldnbcncjmeacmnondmkkfedmgmp

Description from extension meta

Interactive editor for CSS Shapes.

Image from store CSS Shapes Editor

Description from store Create and adjust CSS Shapes values with an interactive editor overlapping the selected element. Update 21 May 2015: --- For polygons, unit-less zero coordinates will inherit the non-zero sibling coordinate unit instead of defaulting to pixels. Example 0 100% => 0% 100% Shapes sidebar: New sidebar to the DevTools Elements panel called "Shapes" which offers controls to create and edit CSS Shapes values like polygon(), circle() and ellipse() on the selected element. Polygons: Click the edges of the shape to add new points. Drag points to change the shape. Double-click points to remove them. Select the transform tool to move, scale and rotate the polygon shape. Circles & ellipses: Drag the shape to move it around. Pull on the edges and corners to scale and resize. Update History === Update 13 Jan 2015: --- Provides workaround for Chrome 40+ regression which causes editor to fail when selecting an element to edit. Update 8 Dec 2014: --- This extension has been wrongly accused of spreading malware. It does not. Its source code is always available for inspection: https://github.com/oslego/chrome-css-shapes-editor The latest release (Version 1.2.0) addresses some potential vulnerabilities exploitable by 3rd party malicious scripts. If you experience malicious behavior from your browser, reset your browser settings: https://support.google.com/chrome/answer/3296214

Latest reviews

(2021-11-29) Gregori Rain: Уже не работает ( Можно починить расширение? (
(2021-06-04) Tanmay Dwivedi: Very useful..especially the clip-path..I highly recommend people to watch video before using it.
(2021-05-16) Kelsey MacPherson: Couldn't figure out how to use it. Checked Dev Tools -> Elements and I see nothing new about shapes.
(2020-10-18) Soczek v2: Great tool, thanks :D
(2019-04-09) Kate O Brien: Useful when it works, very unreliable. I'll be working with a image then, reload the page to set my work back to the original and the extension will just not work. Or sometimes it will not work to begin with. At first I thought I was using it wrong but it seems like a fault with the extension
(2018-12-26) Fahad Mirza: Can anyone tell me how can i use it bcz its not working in my PC. I already watched the demo video. Please help me.
(2018-10-08) Ferran Buireu: No acabo de ver la funcionalidad que tiene, si se integra con devtools, lo hace bastante mal y con opciones muy escondidas. Deberían aclarar cómo y dónde se integra y añadir las opciones. El link de personalización te lleva a Chrome Store.
(2018-08-05) Frank Reding: I recommend reading the author's blog post, for some extra tips, like instantly changing units: http://razvancaliman.com/writing/css-shapes-editor-chrome/
(2018-05-10) Gabriela F. Ruellan: A real time saver! Thanks!
(2018-04-10) Marc De Gagné: Took me some time to figer it out... First: To access the functionality of the tool itself, the file being used with this extension as to be served by a server, local or distant. Second: select the element in the DOM. Third: select in the style tab (click on it), the actual part of shape-outside that form the shape ex.: polygone(...); code. Last: go to the shape tab and clic on the arrow. Have fun and get ready to use it, it's coming...!
(2018-01-30) Artur: Great and useful tool. Thanks!
(2017-07-19) Ariel Panelli: I cant see the options.. I cant do nothing.. The extensions has only one option that take me to the chrome store page..
(2017-07-07) Armağan: Very useful tool.Unfortunately there are a lot reviews that have been made without even watching the video
(2017-02-25) Artem Marchuk: Good idea, and good start! Though requires quite a few fixes for a long time: highly unpredictable, sometimes its doesn't display the shape in browser; you can't edit values in console; you can't adjust values that are defined in your CSS; no percentage support.
(2016-12-21) Ilya Vakhrin: Amazing plugin! Great work
(2016-07-31) Groupe Technique: ça marche pas
(2016-06-30) Eshop Guide: It is fully functional, however it does break some website displays in chrome dev channel for mac: Version 53.0.2783.2 dev (64-bit)
(2016-04-06) 非常好用，感谢！感谢！
(2016-02-03) GriNAME (GriNAME): Спасибо))
(2015-12-02) Mitgardxxl: very usefull
(2015-11-20) quang hung Lai (eWallet): thanks
(2015-10-19) Zhao Zhao: 制作不规则图像css很不错
(2015-07-11) Anastasia Dunbar: I scanned in: C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\Default\Extensions There's just JavaScript so why would there be malware? What the hell is happening in the 'User Reviews'?
(2015-06-28) Emilie Glen: doesn't work
(2015-06-23) Tylar Marple: Malware
(2015-05-04) Quasar Zero: 配合Brackets做Css Shapes~
(2015-02-17) 조순학: good..
(2015-01-02) Sergio Arevalo: Malware. Took me manually deleting the files to remove it.
(2014-12-12) G. LaMar Kirby: Malware, any extention you can't disable or remove by admins should be banned
(2014-12-08) Adrià Vilanova Martínez: Love it, keep up the great work! :-D

Latest issues

(2023-04-08, v:1.3.0) Gaurav Shukla: Unable to use this Extension on MS Edge.
I know that MS Ege is Chromium Based and so it supports Chrome Extensions, but i am unable to use this extension on MS Edge. So does this extension not supported by MS Edge?
(2023-01-11, v:1.3.0) Tony G: Why is it greyed out?
I am unable to use it
(2019-07-08, v:1.3.0) Chris Machabee: Program returns home on activation
Program returns to Google Store when clicked on in task bar. It suggest that the program has lost its programming. Are you familiar with this problem?
(2019-03-14, v:1.3.0) dont work's local
css shapes editor работает только в онлайн режиме , а локально - нет.
(2019-03-14, v:1.3.0) don't working
css shapes editor works online only but not local
(2018-09-19, v:1.3.0) 用不了
用不了啊添加了但是选不中图片, 没有出现图片旁边的拉伸线
(2018-02-14, v:1.3.0) Dark mode dev tools issue
Hi! First of all thank you for the great tool. And it would be even more useful if it will look same great in a dark mode dev tools.
(2017-08-29, v:1.3.0) Kirill Onishchenko: Clip path
Why I do not see an option to create clip-path? I only have the option to create a shape-outside!
(2017-06-24, v:1.3.0) clip-path
Why I do not see an option to create clip-path? I only have the option to create a shape-outside!
(2016-11-07, v:1.3.0) Responsiveness
Is there a way to convert the px to percentages so the shape dimensions will be responsive? Love the tool, just need it to work on all screen sizes. Thanks.
(2016-10-25, v:1.3.0) doesn't show up
It doesn't show up in devtools in Chrome 54. please help
(2016-08-24, v:1.3.0) Mr. Orayvis: not loading
does not load brings me right back to chrome web store

Statistics

Installs

15,829

Links

Extension in store

Developer e-mail