Lumi LabClip Path Marker
LumiX Post
AI-assisted polygon workflow

Tune CSS polygons for Lumi lessons, generated UI snippets, and visual experiments without leaving the maker.

Double click to add points
to custom polygon.

Lumi workflow

A compact marker for turning visual clip-path edits into reusable CSS that fits Lumi exercises.

  • Keep presets fast for lesson demos.
  • Copy production-ready polygon CSS in one click.
  • Use custom backgrounds to test generated UI ideas.

Demo Size

x

Demo Background

Show outside clip-path

About Clip Paths

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

Browser Support

Check out the current browser support for the clip-path property on Can I Use.

Brought to you by Bennett Feely

Find this project on Github.

Want a list of the name of every polygon? Check out my new site, Copy Paste List.

Triangle, selected point 1: 50% 0%