CSS Clip Path Generator
Build clip-path values for circles, polygons, and other shapes. Preview the cut, then copy the CSS into cards, heroes, or image frames.
CSS Clip Path Generator
Create custom shapes and clipping paths for modern web design
Shape Previewcircle
Live preview of your clip path
Shape Controls
How clip-path works
clip-path defines which part of an element stays visible. Coordinates typically treat (0%, 0%) as the top-left of the element and (100%, 100%) as the bottom-right. The box is unchanged; only the painted region is clipped.
Basics
- Coordinate system: percentages scale with the element
- Shape functions: circle(), ellipse(), inset(), polygon(), path()
- Non-destructive: content outside the path is hidden, not deleted
- Animatable: works best between same-type shapes with matching point counts
Shape types
- Basic: circle, ellipse, inset
- Polygons: triangles, hexagons, stars, custom point lists
- path(): SVG-like curves (check browser support)
- url(): reference an SVG clipPath for complex art
Browser notes
Basic shapes are widely supported in current Chrome, Firefox, Safari, and Edge. path() support is narrower—test before shipping. Older WebKit builds sometimes needed -webkit-clip-path; keep a rectangular fallback if you still support those.
Where people use it
- Circular or hexagonal avatars without exporting extra image assets
- Diagonal section breaks between page bands
- Hero crops and gallery frames that share one geometric language
- Hover morphs when both polygons share the same point count
Percentage coordinates travel better across breakpoints than fixed pixels. Simplify shapes on small screens if dense polygons start to feel busy.
Syntax examples
Related tools
Frequently asked questions
What is the difference between clip-path and mask?
clip-path cuts a hard silhouette. mask can fade with images or gradients. Use clip-path for geometric shapes; use mask when you need soft edges or complex transparency.
Can I animate between clip-path shapes?
Yes within limits. Polygon-to-polygon works when both shapes share the same point count. Circle-to-polygon does not interpolate cleanly—morph with SVG or keep shape types aligned.
How do clip paths affect accessibility?
They are visual only. Screen readers still see the full DOM content. Do not clip away interactive controls users need, and keep text inside the visible region readable.
What happens to content outside the clip?
It is hidden, not removed. Layout and accessibility tree still include it—similar to overflow: hidden, but with a custom outline.
Are complex clip paths slow?
Many points or frequent animated changes can cost more on low-end phones. Prefer simpler polygons when you can, and test on real devices if the shape animates on scroll.
Related tools
Related tools
Related Color and Design Tools
Interactive Color Picker (HEX, RGB, HSL)
An interactive color picker tool to select, convert, and copy colors in HEX, RGB, and HSL formats. Perfect for designers, developers, and artists. Explore color theory, conversion formulas, and best practices.
Color Temperature Calculator
Calculate and convert color temperature (Kelvin) to RGB and HEX values. Perfect for photographers, designers, and lighting professionals working with white balance and color grading.
Contrast Checker - Test Color Accessibility
Check color contrast ratios for WCAG compliance and accessibility standards
CSS Border Style Previewer
Create and preview CSS border styles with our interactive tool. Customize border width, style, color, and radius. Perfect for web designers and developers looking to craft perfect borders.
CSS Box Shadow Generator - Create Beautiful Shadows
Create and customize CSS box shadows with our interactive generator. Preview and copy the code instantly.
CSS Gradient Animation Previewer - Animated Gradient Generator
Create stunning animated CSS gradients with live preview. Generate smooth color transitions, pulsing effects, and rotating gradients with customizable timing and easing.
Dark Mode Palette Builder
Create a consistent and accessible dark mode color palette from your existing brand colors. Our tool helps you adjust hue, saturation, and lightness to build a beautiful and readable dark theme.
Duotone Image Filter Tool - Create Stylish Two-Color Effects
Transform your images with stunning duotone effects. Apply two-color filters with customizable shadow and highlight colors for artistic and modern visual styles.
Favicon Color Preview Tool — Instant SVG Favicon Generator
Preview and generate SVG favicons in any color. Copy markup or download ready-to-use favicon files for your website.
Flat UI Color Picker - Modern Design Colors
Discover and copy popular flat design colors used in modern web interfaces. Browse curated color palettes perfect for UI/UX design, web development, and digital projects.