CSS Shapes Editor
Item video thumbnail
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item video thumbnail
Item media 1 screenshot
Item media 1 screenshot
Item media 2 screenshot
Item media 3 screenshot
Item video thumbnail

Overview

Interactive editor for CSS Shapes.

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

3.8 out of 5101 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Review's profile picture

Tanmay DwivediJun 4, 2021

Very useful..especially the clip-path..I highly recommend people to watch video before using it.

Review's profile picture

Kelsey MacPhersonMay 15, 2021

Couldn't figure out how to use it. Checked Dev Tools -> Elements and I see nothing new about shapes.

3 out of 3 people found this helpful
Review's profile picture

Soczek v2Oct 18, 2020

Great tool, thanks :D

Details

  • Version
    1.3.0
  • Updated
    May 21, 2015
  • Offered by
    Razvan Caliman
  • Size
    84.76KiB
  • Languages
    English (United States)
  • Developer
    Email
    razvan.caliman+dev@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

The developer has not provided any information about the collection or usage of your data.

Support

Related

CSS3 Generator

4.7(60)

A handy generator for all of your CSS3 needs from within the browser

Dimensions

4.1(446)

A tool for designers to measure screen dimensions

Live editor for CSS, Less & Sass - Magic CSS

4.7(255)

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

Wordpress Style Editor

3.1(47)

Save CSS changes made in developer tools, directly to the Wordpress stylesheet.

Stylebot

4.3(1.6K)

Change the appearance of the web instantly

Live CSS Editor

3.8(183)

Live Write CSS onto any page

LiveReload

3.8(803)

Provides Chrome browser integration for the official LiveReload apps (Mac & Windows) and third-parties like guard-livereload and…

45to75

4.7(6)

Character counter for helping to optimize line length (measure) between 45 and 75 characters.

Code Cola

4.6(188)

Code Cola is a chrome extension for editing online pages' css style visually.

Emmet LiveStyle

4.4(351)

LiveStyle — the first bi-directional real-time edit tool for CSS, LESS and SCSS.

CSS Gradient Inspector

5.0(5)

Extends the Developer Tools, adding a sidebar that displays information about the gradients applied to the inspected element.

CSS Dig

2.9(51)

Collect and analyze CSS.

CSS3 Generator

4.7(60)

A handy generator for all of your CSS3 needs from within the browser

Dimensions

4.1(446)

A tool for designers to measure screen dimensions

Live editor for CSS, Less & Sass - Magic CSS

4.7(255)

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

Wordpress Style Editor

3.1(47)

Save CSS changes made in developer tools, directly to the Wordpress stylesheet.

Stylebot

4.3(1.6K)

Change the appearance of the web instantly

Live CSS Editor

3.8(183)

Live Write CSS onto any page

LiveReload

3.8(803)

Provides Chrome browser integration for the official LiveReload apps (Mac & Windows) and third-parties like guard-livereload and…

45to75

4.7(6)

Character counter for helping to optimize line length (measure) between 45 and 75 characters.

Google apps