// build shape-outside layouts without guessing
Build CSS shape-outside values visually — circles, ellipses, polygons. Live preview with float layout. Copy clean CSS code instantly.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.
Choose circle, ellipse, polygon, or inset from the tabs at the top.
Use sliders to fine-tune your shape. For polygons, drag handles directly on the canvas.
Hit "Copy All" to grab the ready-to-paste CSS output for your project.
The CSS shape-outside property defines a shape that adjacent inline content wraps around. Combined with float, it lets text hug circles, custom polygons, or any shape you define — perfect for editorial and creative layouts.
shape-outside is a CSS property that defines a non-rectangular shape for adjacent inline content to wrap around. It only works on floated elements. You can use basic shapes like circle() or ellipse(), or a polygon() with custom points.
All modern browsers support shape-outside — Chrome, Firefox, Safari, and Edge. Browser support is excellent as of 2024. IE11 does not support it, but IE11 usage is effectively zero today.
No. shape-outside only affects how surrounding text wraps — it does not clip or mask the element itself. To visually clip the element to the same shape, combine it with clip-path using the same shape value.
shape-margin adds a gap between the defined shape and the text flowing around it. Use it for breathing room — values in px, em, rem, or %. The output from this tool includes the margin rule automatically when set above zero.
Yes — you can pass a URL to an image with transparency as the shape value: shape-outside: url(image.png). The browser uses the alpha channel to determine the wrap boundary. This tool generates basic shape functions, not image-based shapes.
Absolutely. A simple two-point polygon like polygon(0 0, 100% 0, 0 100%) on a floated element creates a diagonal text flow — a classic editorial layout technique. Use the Polygon tab and the Triangle or custom presets to explore this.
CSS shape-outside is one of the most underused layout properties in the modern web developer's toolkit. It defines a geometric shape that inline content — typically text — wraps around when floated. Without it, every floated image or element creates a rectangular wrap boundary, no matter how irregular the image actually looks. With shape-outside, you can define a circle, ellipse, custom polygon, or inset rectangle that text flows around naturally, opening up editorial layouts previously only possible in print design software.
This generator lets you build those shapes visually — dragging handles, adjusting sliders — and instantly see how text would wrap around them in a live preview. Copy the generated CSS and drop it directly into your project.
💡 Looking for premium CSS templates and UI kits? MonsterONE offers unlimited downloads of templates, UI kits, and assets — worth checking out.
circle() — the simplest form. Define a radius and a center point. shape-outside: circle(50% at 50% 50%) creates a circular wrap centered on the element. Adjust the center to push text into interesting asymmetric flows.
ellipse() — like circle() but with separate horizontal and vertical radii. Perfect for oval compositions and tall or wide image wraps. The two radius values give you independent control over the x and y extents.
polygon() — the most flexible function. Supply any number of x/y coordinate pairs and the browser interpolates a closed shape. A three-point polygon creates a triangle; six points make a hexagon. The power here is that any custom contour is possible, from organic blobs to sharp geometric cuts.
inset() — defines a rectangle inset from the element's edges, with optional rounded corners via a round keyword. Useful when you need a slightly padded or rounded rectangular wrap rather than the full element boundary.
The companion property shape-margin adds a buffer between your defined shape and the text that wraps around it. Without it, text butts right up against the shape boundary, which can feel cramped. A value of 8px–20px is usually enough to create a comfortable editorial feel. This tool exposes shape-margin as a slider and includes it in the CSS output automatically.
One of the most effective techniques is using the same shape value for both shape-outside and clip-path. The shape-outside property controls how text wraps — but it doesn't visually cut the element. A floated circle with shape-outside: circle(50%) still renders as a rectangle visually. Add clip-path: circle(50%) and the element is also visually clipped to match, creating a seamless editorial effect where text appears to flow around a true circular image.
Diagonal text flow: Float a narrow div with shape-outside: polygon(0 0, 100% 0, 0 100%) on the left. Text flows diagonally down from the top-right corner — a classic magazine technique. Add a matching polygon on the right to create a symmetrical diagonal section.
Circular pull quote: Float a circular element with a centered quote. Use shape-outside: circle(50%) so text wraps naturally around the circular boundary. The result feels far more dynamic than a simple rectangular sidebar quote.
Organic image wrap: For a product photo or portrait, trace the subject roughly with a polygon. Even a coarse approximation with 6–8 points dramatically improves the visual relationship between image and text compared to a rectangle.
As of 2024, shape-outside has full support in all modern browsers: Chrome 37+, Firefox 62+, Safari 10.1+, and Edge 79+. Global support is above 97%. The property degrades gracefully — browsers that don't support it simply render a rectangular float, which is perfectly usable. No polyfill is needed for production use.
For the rare case where you need IE11 support, wrapping the shape-outside declaration in a @supports block is the clean approach: @supports (shape-outside: circle()) { ... }. This ensures the layout works in both environments without any JavaScript dependency.
Shape-outside is a layout property — it affects the inline formatting context around the floated element. It does not trigger paint or composite layers, so it's extremely performant. Complex polygons with dozens of points are still handled entirely by the browser's layout engine without GPU involvement. You can freely animate shape-outside via CSS transitions on the shape values and the browser will interpolate between them smoothly, which opens up interesting scroll-driven or hover-triggered shape morphing effects.