#Visual CSS Editor

Edit number-heavy CSS by looking at it

Some CSS properties are a long row of numbers that only make sense once you see them rendered. This editor puts each one next to a live preview with handles, sliders and pickers, and writes clean CSS as you go. Everything runs in your browser.

What you can edit

• Colors: pick visually, then copy as HEX, RGB, legacy RGBA, HSL, HSLA, HWB or OKLCH, with WCAG contrast against white and black text.
• Gradients: linear, radial and conic, plain or repeating. Drag colour stops on a bar, set the angle on a dial, drag the centre on the preview, and blend in OKLCH or other colour spaces.
• Box shadow and text shadow: stack as many layers as you like, with an offset pad, blur, spread, inset and per-layer colour.
• Filter: blur, brightness, contrast, saturate, grayscale, sepia, invert, opacity, hue-rotate and drop-shadow, in any order, with a before/after slider.
• Clip path: polygons with draggable points, plus circle, ellipse and inset shapes, and a library of ready-made shapes.
• Border radius: one value, per corner, or the full eight-value elliptical syntax, with handles on every edge.
• Transform: translate, rotate, scale, skew and 3D rotation with perspective, applied in the order you choose.
• Easing curves: drag the two control points of a cubic-bezier() and watch it animate next to a linear reference.

Paste CSS to edit it

The box at the bottom is both output and input. Paste a value like 0 4px 12px rgb(0 0 0 / 0.2) or a whole declaration like clip-path: polygon(…). The editor works out which property it is, switches to the right tool and loads it. If something can't be read, the box says so and nothing is lost.

Handy controls

• Drag any slider label sideways to scrub its value; hold Shift to move ten times faster.
• Handles on the previews can be moved with the arrow keys once focused; Shift moves further.
• In the gradient and clip-path editors, Delete removes the selected stop or point.
• The address bar always holds the current value, so you can bookmark or share a link to it.

Questions

Is anything uploaded?

No. The editor runs locally in your browser and never sends what you paste anywhere.

Why won't it read my value?

The editor reads lengths in px and %. Values using em, rem, calc() or CSS variables can't be shown with handles, so it reports them instead of guessing.

Which colour format should I use?

HEX and RGB work everywhere. OKLCH is supported by all current browsers and makes it easy to change lightness without shifting the hue. Gradients blended in oklch avoid the grey middle you get between complementary colours.