Les pubs vous déplaisent ? Aller Sans pub Auj. 

Générateur de Clip-Path CSS

CouleurPromoteur

PUBLICITÉ · RETIRER?

SAISIR

Processus automatique

SORTIR

Côté client

PUBLICITÉ · RETIRER?

Guide

Générateur de Clip-Path CSS

Visually create CSS clip-path shapes with an intuitive drag-and-drop editor. Build polygons, circles, ellipses, and inset shapes, then copy the generated CSS directly into your stylesheets.

Comment utiliser

Select a shape type or start from a preset template. Drag control points to adjust the shape visually on the preview canvas. The CSS clip-path code updates in real-time as you edit. When you are happy with the result, copy the generated CSS code or export as SVG.

Caractéristiques

Visual drag-and-drop editor – Create shapes by moving control points directly on the canvas
Multiple shape types – Polygon, circle, ellipse, and inset
Preset templates – Start from common shapes like triangles, stars, arrows, and more
Undo and redo – Full history support for non-destructive editing
Snap to grid – Precise point placement with configurable grid snapping
SVG export – Download your shape as an SVG file
Live CSS output – Copy the generated clip-path property instantly

PUBLICITÉ · RETIRER?

 FAQ

What is a CSS clip-path and how does it work?

CSS clip-path defines a clipping region that determines which parts of an element are visible. Anything outside the clip-path shape is hidden. It supports basic shapes (circle, ellipse, inset, polygon) and SVG path definitions. Unlike overflow:hidden which only clips to rectangular bounds, clip-path can create complex non-rectangular visible areas for creative layouts and visual effects.
What is the difference between clip-path and mask in CSS?

Clip-path creates a hard edge — pixels are either fully visible or fully hidden based on whether they fall inside the defined shape. CSS mask uses an image or gradient to control transparency, allowing soft edges and partial transparency. Clip-path is simpler and more performant for geometric shapes, while masks offer more artistic control with gradients and alpha channels.
How do CSS polygon coordinates work?

Polygon coordinates in clip-path use percentage or length values relative to the element's bounding box. Each point is defined as an x,y pair where 0% 0% is the top-left corner and 100% 100% is the bottom-right. Points are connected in order to form the shape. For example, polygon(50% 0%, 100% 100%, 0% 100%) creates a triangle. The shape automatically closes by connecting the last point back to the first.

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

PUBLICITÉ · RETIRER?