Refract

CSS image shape generator: arches, blobs and waves

Give photos a shape: an arch, a blob, a squircle, a wavy edge or a diagonal cut. Try it on your own image, then paste the CSS onto your page builder’s image widget.

Free · no sign-up · copy and paste

Controls

CSS










How to use the image shape mask generator


  1. Add an image. A sample photo is loaded first. Drop in your own to see the shape on it; the image stays on your device.
  2. Pick a shape. Choose an arch, circle, pill, squircle, blob, wave edge, diagonal, hexagon or leaf. Use New blob shape until you find a blob you like.
  3. Set the proportions. Choose an aspect ratio so every image in a row has the same shape, whatever its original size. The image is cropped to fill it, without stretching.
  4. Paste it onto your image. Choose your page builder from Paste into. The CSS targets the image inside that builder’s Image widget or block.


Three ways CSS shapes an image
Simple rounded shapes like arches, pills and circles use border-radius, which is fast and supported everywhere. Straight-edged shapes like diagonals and hexagons use clip-path: polygon(). Curvy shapes like blobs, waves and squircles use mask with a small SVG, which can be any shape at all.
Keeping images consistent
Arches and organic shapes look best when every image in a set has the same proportions. Setting aspect-ratio with object-fit: cover crops each image to fill the shape, so a gallery of mixed photos still lines up.
Accessibility and SEO
The image stays a real <img> with its alt text, so it’s still read by screen readers and indexed by search engines. Only the visible shape changes.
Using it in WordPress, Elementor, Divi, Bricks and Breakdance
Choose your page builder from Paste into, above the code, and Refract rewrites the CSS for it. Elementor Pro and Divi 5 use the selector keyword, Bricks uses %root% and Breakdance uses %%SELECTOR%%, so the effect only applies to the element you paste it into. For the WordPress block editor, free Elementor and Divi 4, you add a CSS class to the element and paste the CSS into your site’s custom CSS. The numbered steps under the code show exactly where to click, and Refract remembers your builder for every tool.


Frequently asked questions


Will the shape work on mobile?
Yes. Every shape scales with the image, so it looks the same at any width.
Can I add a shadow to a shaped image?
box-shadow follows the original rectangle, not the shape. Put filter: drop-shadow() on the image’s parent element instead, which follows the visible shape.
Does this work in Elementor’s Image widget?
Yes. Choose Elementor from Paste into; the CSS targets the img inside the widget so the shape applies to the picture itself.
Can I use this in Elementor, Divi or Bricks?
Yes. Choose your page builder under Paste into, above the code. The CSS is rewritten for that builder, and the steps underneath tell you exactly where to paste it. WordPress’s block editor and Breakdance are supported too.