No Login Data Private Local Save

shape‑margin & shape‑image‑threshold Tester

Developer Tools Educational CSS float shape‑margin shape‑outside
40
0
0
0
Controls
Image Mode
px
Alpha threshold for image-based shapes (0–1)
Generated CSS
.float-element { float: left; width: 180px; height: 180px; shape-outside: url('shape.png'); shape-image-threshold: 0.5; shape-margin: 20px; }
CSS is updated in real-time
Live Preview

CSS Shapes allow web designers to create sophisticated, non-rectangular layouts. The shape-outside property defines a shape around which adjacent inline content wraps. When combined with shape-margin, you can control the spacing between the shape and the flowing text. For image-based shapes, shape-image-threshold determines which pixels contribute to the shape based on their alpha channel transparency. A lower threshold includes more semi-transparent pixels, resulting in a larger exclusion zone. A higher threshold only counts nearly opaque pixels, creating a tighter wrap. This technique is especially useful for magazine-style layouts, pull quotes, drop caps, and any design where text needs to flow around irregular visual elements. Experiment with the sliders to see how these properties interact in real time. Notice how the text responds dynamically to changes in margin distance and alpha threshold values. Modern browsers including Chrome, Firefox, Safari, and Edge all provide excellent support for CSS Shapes, making them production-ready for creative web typography and layout design.

Frequently Asked Questions
What is shape-margin?

shape-margin defines the outer margin of a CSS shape, creating extra space between the shape boundary and the surrounding inline content. It accepts length values (px, em, rem, %) and works with all shape-outside types including circle(), ellipse(), polygon(), inset(), and image-based shapes.

What does shape-image-threshold do?

This property sets the alpha channel threshold used when extracting a shape from an image. Pixels with alpha above the threshold become part of the shape (text is excluded); pixels below are treated as transparent (text can flow in). Values range from 0 (only fully transparent pixels excluded) to 1 (only fully opaque pixels included).

Can I use shape-image-threshold with CSS gradients?

Yes! Modern browsers support using CSS gradients (linear-gradient, radial-gradient, conic-gradient) as shape-outside values. The shape-image-threshold works with these gradients since they generate alpha channel data, just like raster images.

Does shape-margin affect the element's box model?

No. shape-margin only affects the shape used for text wrapping. It does not impact the element's CSS box model, border, padding, or regular margin. Think of it as an invisible buffer zone around the shape that pushes text further away.

What's the difference between shape-outside and clip-path?

shape-outside controls how inline content flows around an element without affecting its visual rendering. clip-path visually clips the element's content. They can be combined: use shape-outside for text wrapping and clip-path to visually trim the element to match.

Browser compatibility for CSS Shapes?

CSS Shapes (Level 1) are supported in all modern browsers: Chrome 37+, Firefox 62+, Safari 8+, Edge 79+. The shape-image-threshold property has identical support. For production use, always test across target browsers, especially when using image-based shapes.

🔧 Related Tools