Generator CSS Clip Path

Construiți poligon și modelați trasee de decupaje cu o previzualizare interactivă. Excelent pentru forme de eroi și măști de imagine.

CSS Clip Path Generator

Live

Shape

CSS output

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Construiți poligon și modelați trasee de decupaje cu o previzualizare interactivă.
Se rulează în browserul dvs
Gratuit de utilizat

Text / on-page input

Previzualizările cu mai multe straturi foarte complexe se pot simți mai lente pe telefoanele mai vechi.

Generatoarele de culoare și CSS rulează în întregime în browserul dvs. Previzualizările și conversiile nu vă încarcă niciodată stilurile.

Utilizați CSS Clip Path Generator ori de câte ori aveți nevoie: construiți poligon și modelați trasee de clipuri cu o previzualizare interactivă.

Verificați dacă există CSS concurente pe pagina dvs. (resetări, culori moștenite). Copiați mai întâi regula generată într-o foaie de stil izolată.

Nu. Generatoarele și convertoarele rulează în browserul dvs. cu previzualizare live.

Nu. Deschideți instrumentul, modificați controalele și copiați CSS-ul.

Generate CSS triangles with border tricks — direction, size, and color.

Control each corner independently and preview rounded shapes with copy-ready CSS.

Build linear, radial, and conic gradients with live preview and copy-ready CSS.