Clippy
GeneratorDrag the points of a polygon, circle or inset shape over an image and copy the clip-path value.
A visual clip-path maker by Bennett Feely. You pick a preset or custom shape, drag its points over a sample image, and copy the clip-path value it writes for you.
It covers polygon, circle, ellipse and inset shapes, including rounded corners on inset(). The page notes that you can animate between two clip-path shapes when they have the same number of points.
It points to Can I Use for current browser support. The source is on GitHub, though no licence is stated.
Good for
- Draw polygon clip-paths by dragging points
- Copy clip-path values for circles, ellipses and insets
- Set up two shapes with matching points for a clip-path transition
- Preview a clip on an image before writing the CSS
clip-path
More generators
See all →Anchor position tool
GeneratorClick through position-area values and watch where an anchored element lands around its anchor.- Stars
- 16
- Last commit
- 2 years ago
- Licence
- Not stated
scroll-driven-animations.style
GeneratorDemos plus visualisers that show how scroll() and view() timelines and their ranges map to an animation, with a free video course.- Price
- Free
- Made by
- Bramus Van Damme (Google Chrome DevRel)
- Kind
- Generator
Layoutit Grid
GeneratorDraw rows, columns and named areas visually and get the grid-template CSS and matching HTML.- Stars
- 1,745
- Last commit
- 5 years ago
- Licence
- MIT
