Home
CSS Shadow
CSS Text Formatter
Other Tools

Home
CSS Tools

CSS Clip-Path Generator

Create customized clip-paths with live preview and code generation

Predefined Shapes

Circle Ellipse Triangle Rhombus Pentagon Hexagon Star Message Cross

Circle & Ellipse

Radius (%)

1% 50%

Position X (%)

Position Y (%)

Inset (Rectangle)

Top (px)

Right (px)

Bottom (px)

Left (px)

Border Radius (px)

Polygon Tool

Custom Polygon

Enable Drag Points

Freehand Drawing

Enable Draw Mode

Smoothing

Path Smoothing

Enable Corner Radius

Corner Radius

SVG to Clip-Path

SVG Path

Hover Effects

Enable Hover Effect

Hover Clip-Path

Animation

Enable Animation

Animation Duration (s)

0.1s 5s

Easing Function

Responsive Options

Generate Responsive Code

Mobile Breakpoint (px)

Text Clipping

Apply to Text

Text Content

Font Size (px)

Live Preview

Preview

Hover over the shape to see the effect

Table Preview

1	2	3
4	5	6
7	8	9

Generated CSS Code

Image Background

Use Image Background

Sample Images

Multiple Clip-Paths

Enable Multiple Clip-Paths

Background Options

Background Color

Use Gradient Background

Gradient Color 2

Gradient Direction

All CSS Tools

Handwritten Effect Generator Border Radius Generator Zigzag Wavy Border Border Generator Text Formatter Shadow Generator Text Stroke Outline Link Tool Gradient Generator Background Generator Filter Generator Glassmorphism Generator Flip Card Generator Outline Generator Blob Generator Reflection Generator Scrollbar Generator Ribbon Generator Loader Spinner Noise Texture bg Toggle Switch Generator Transform Generator Cursor Maker Star Rating Maker Table Generator Drop Cap Generator Skew Perspective Clip Path Maker

© 2025 ToolsRail. All Rights Reserved.

About