Werkery

CSS Clip Path Generator

Preset clip-path shapes — circle, ellipse, triangle, hexagon, parallelogram, star, message bubble. Visual preview + copy CSS.

Tool by ·
ad slot ()
ad slot ()

How it works

  1. 1
    Pick shape
    From presets.
  2. 2
    Copy
    Use the CSS.

Frequently asked

Why use clip-path vs SVG?

clip-path keeps the original element's behavior (text selection, interactivity, accessibility) while masking its visual bounds. SVG replaces the element with a vector. For text and interactive elements, clip-path is usually right.

Get new tools first.

One tool per week. No ads. Unsubscribe anytime.

Related tools

CSS Box Shadow Generator
Build CSS box-shadow values visually. Adjust x/y offset, blur, spread, color, and inset. Live preview + copy-paste code.
CSS Border Radius Generator
Visually build border-radius values for any element. Adjust each corner independently or use a single value. Live preview + copy.
CSS Gradient Generator
Build linear and radial CSS gradients with two or three color stops. Live preview + copy-paste code.
Termination Letter Generator
Create a legally sound termination letter for your apartment, employment contract, mobile phone contract, gym membership, or insurance — in seconds, AI-powered.
Rent Reduction Calculator
Calculate the permissible rent reduction for housing defects (mould, heating failure, noise) and generate a defect notice letter to your landlord.
Garnishment Exemption Calculator 2026
Calculate your protected income based on the current garnishment table 2026 (valid since July 1, 2025). Includes maintenance obligations.
Tool designed and editorially reviewed by Felix Brübach. Text drafted with AI assistance and reviewed for legal and factual accuracy before publication. Not legal advice — for complex cases, consult a lawyer.
ad slot ()