Clip-Path Studio ✂️

Generate CSS to clip an HTML element into any shape.

Editor

Corner roundness

Preview

Clipped Box

Cute Magick

💘⭐️🌼

Heart / Star / Flower presets added

Points

#1 — 15.0%, 15.0%

#2 — 85.0%, 15.0%

#3 — 85.0%, 85.0%

#4 — 15.0%, 85.0%

Code

   svg
<svg aria-hidden="true" focusable="false" style="width: 0px; height: 0px; transform: scale(0); opacity: 0; position: absolute; z-index: -11;">
  <defs>
    <clipPath id="cute-magick-clip" clipPathUnits="objectBoundingBox">
      <path d="M 0 0.08 Q 0 0, 0.08 0 L 0.92 0 Q 1 0, 1 0.08 L 1 0.92 Q 1 1, 0.92 1 L 0.08 1 Q 0 1, 0 0.92 L 0 0.08 Z" />
    </clipPath>
  </defs>
</svg>

<div class="cute-shape">Hello!</div>
<img class="cute-shape" src="/images/example.png" alt="Clipped Image">

   css
.cute-shape {
  clip-path: url(#cute-magick-clip);
  /* Demo styles below */
  background: #facade;
  width: 200px;
  height: 200px;
  display: grid;
  place-content: center;
}

Thanks