Code Editor (Code tab)

When the CSS window of an element is pinned (by pressing the space bar key or by clicking on "Edit or inspect element's CSS" on the Select mode), you can start editing the CSS of the specific element and see the changes in real-time:

You can remove/add declarations and also edit @media queries, @keyframes animations, pseudo-classes, and pseudo-elements (such as :hover, :before, etc).

It smartly suggests autocompletes for CSS properties and values, and it has checkboxes to easily toggle each declaration.

All changes are tracked and shareable. To learn more about it, check:

Handling CSS changes

Easily change colors

You can also easily change colors on the Code Editor. To do that, just click on the color preview to edit it:

Tints and shades, opacity, hue, color syntaxes, color eyedropper, everything you need

It's a complete color picker that suggests tints and shades in real-time so that you can quickly try darker or lighter colors, and comes with an eyedropper so that you can pick any color from the screen (even if it's from an image, for example).