Create account
Interfaces and CSSRuns in your browser

CSS clip-path Generator

Configure a simple shape mask without canvas, SVG export, or runtime parsing of full CSS.

  • Inset/circle/ellipse/polygon
  • 0–100% values
  • Local preview
Online tool

Try the tool

Add your data, choose the settings, and get the result.

Input

Polygon: x1 y1 x2 y2 x3 y3 x4 y4. Inset: top right bottom left. Circle: radius x y. Ellipse: rx ry x y.

Result

Preview
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

Your data stays here

Text and selected files are processed in the current browser and are not sent to a server to produce the result.

Reviewed: 2026-07-17
01

How to use it

  1. 1

    Choose the shape mode.

  2. 2

    Enter bounded percentage values.

  3. 3

    Check the preview and copy the clip-path declaration.

02

What the tool can do

  • Inset, circle, ellipse, and four-point polygon.
  • Validation for values in the 0–100% range.
  • Plain CSS output without image or SVG export.
03

Common use cases

  • Quick shape mask for a card, hero image, or decorative surface.
  • Checking percentages before moving them into a design token.
  • Prototyping a simple CSS-only visual effect.
04

How it works inside

All values are validated as percentages and user CSS is not executed.

The preview applies only the generated clip-path value.

05

Questions and answers

Can I add more polygon points?

No. This batch is limited to four points to keep the tool bounded.

Is clip-path path() supported?

No. path() requires a different parser/editor workflow and is outside this R0 batch.