Open tools

CSS & Design

CSS clip shape

Preview a clip shape. The file is not cut.

In the browser

The shape is a CSS preview. It does not cut the image file.

About this tool

Preview a CSS clip shape and copy the declaration.

Choose a circle, an ellipse, a triangle, or an inset. The box is clipped in the preview. The file on disk is not cut.

Paste the declaration onto the element that should be clipped. Older browsers may ignore clip-path, so check the one you support.

Read the privacy line on this page before you use the result in public.

Quick steps

  1. Preview a CSS clip shape and copy the declaration.
  2. Choose a circle, an ellipse, a triangle, or an inset. The box is clipped in the preview. The file on disk is not cut.
  3. Paste the declaration onto the element that should be clipped. Older browsers may ignore clip-path, so check the one you support.

Read the privacy line on this page before you use the result in public.

FAQ

Preview a CSS clip shape and copy the declaration.

Choose a circle, an ellipse, a triangle, or an inset. The box is clipped in the preview. The file on disk is not cut.

Paste the declaration onto the element that should be clipped. Older browsers may ignore clip-path, so check the one you support.

Read the privacy line on this page before you use the result in public.

A useful next step

CSS corner radius Set four corner radii and copy the CSS. Soft SVG shape Draw a random soft shape and copy the SVG. CSS gradient Build a two-color linear gradient and copy the CSS.

Site policies: Privacy · Terms