AI CSS Shape Outside — Creative Text Wrapping Effects for Modern Layouts

Print magazines have wrapped text around images, pull quotes, and decorative shapes for over a century. The web caught up with the CSS shape-outside property, which lets text flow around circles, ellipses, polygons, and even the transparent regions of an image. Yet most websites still use plain rectangular floats, leaving one of CSS's most visually striking capabilities untouched.

An AI CSS shape-outside generator lets you draw shapes visually, preview how text wraps around them in real time, and export production-ready CSS. No manual coordinate plotting, no guessing at polygon points — just drag, adjust, and copy.

How shape-outside Works

The shape-outside property defines a shape around which inline content wraps. It only works on floated elements — this is important. Without float, the property has no effect. The browser calculates the shape boundary and flows adjacent text along its contour instead of the element's rectangular box:

/* Text wraps around a circle */
.circular-float {
  float: left;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  shape-outside: circle(50%);
  margin-right: 20px;
}

/* Text wraps around an ellipse */
.oval-float {
  float: right;
  width: 250px;
  height: 180px;
  shape-outside: ellipse(50% 50%);
  margin-left: 20px;
}

The circle() function takes a radius and an optional position. The ellipse() function takes horizontal and vertical radii. Both default to centering within the element's box. The text adjacent to the float follows the curved boundary rather than the straight edge of the box.

The Float Requirement

This is the most common mistake developers make with shape-outside: forgetting that it requires float. The property defines how content wraps around a floated element. Without float, the element is not in the float flow, and shape-outside is ignored entirely:

/* This will NOT work */
.broken {
  display: inline-block;
  shape-outside: circle(50%);  /* ignored without float */
}

/* This WILL work */
.working {
  float: left;
  shape-outside: circle(50%);
}

Wrapping Text Around Circles and Images

The most common use case is wrapping text around a circular profile photo or product image. Instead of text running alongside a rectangular image with awkward whitespace in the corners, the text follows the curve of the circle:

.profile-photo {
  float: left;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  shape-outside: circle(50%);
  shape-margin: 16px;
  margin-right: 8px;
  margin-bottom: 8px;
}

The border-radius: 50% makes the image visually circular, and shape-outside: circle(50%) makes the text wrap along that same circle. Without shape-outside, the text would still wrap around the invisible rectangular box of the image, leaving empty triangular gaps at the corners. For more on making images fit perfectly within shapes, see our CSS object-fit guide.

Polygon Shapes for Magazine Layouts

The polygon() function is where shape-outside gets truly powerful. You can define any arbitrary shape by specifying a series of x,y coordinate pairs. This enables magazine-style layouts where text flows around diagonal edges, triangles, diamonds, or custom silhouettes:

/* Diagonal text wrap — text flows along a slanted edge */
.diagonal-shape {
  float: left;
  width: 300px;
  height: 400px;
  shape-outside: polygon(0 0, 100% 0, 60% 100%, 0 100%);
  shape-margin: 16px;
  clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%);
}

/* Diamond shape */
.diamond-shape {
  float: left;
  width: 250px;
  height: 250px;
  shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  shape-margin: 14px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

Notice the pattern: shape-outside defines where text wraps, and clip-path with the same coordinates clips the element to match. Without clip-path, the element remains rectangular even though text wraps around the polygon shape. Using both together creates the complete illusion. For more on clip-path shapes, check out our CSS clip-path generator guide.

Using Image Transparency for Organic Shapes

Perhaps the most impressive feature of shape-outside is its ability to derive shapes from image transparency. Instead of manually plotting polygon coordinates, you can use a PNG with transparent regions and let the browser trace the shape automatically:

.organic-wrap {
  float: left;
  width: 300px;
  shape-outside: url('silhouette.png');
  shape-image-threshold: 0.5;
  shape-margin: 12px;
}

/* The threshold controls how transparent a pixel
   must be to be considered "outside" the shape.
   0.5 means pixels with less than 50% opacity
   are treated as empty space for text to flow into. */

This technique is perfect for wrapping text around product photos, illustrations, or any image with an irregular outline. The browser reads the alpha channel of the image and creates a shape boundary where opacity crosses the threshold value.

Creative Layout Techniques

Beyond basic image wrapping, shape-outside enables several creative layout patterns that were previously impossible with CSS alone.

Drop Cap with Curved Text Flow

A decorative drop cap that text flows around in a curve, rather than the standard rectangular indent:

.drop-cap {
  float: left;
  font-size: 5rem;
  line-height: 0.8;
  font-weight: 700;
  color: #6c5ce7;
  padding: 0 12px 0 0;
  shape-outside: ellipse(55% 55%);
  shape-margin: 8px;
}

Two-Sided Shaping

You can use two floated elements — one left, one right — to create a channel effect where text flows through a shaped corridor:

.shape-left {
  float: left;
  width: 120px;
  height: 400px;
  shape-outside: polygon(0 0, 100% 0, 40% 50%, 100% 100%, 0 100%);
}

.shape-right {
  float: right;
  width: 120px;
  height: 400px;
  shape-outside: polygon(100% 0, 0 0, 60% 50%, 0 100%, 100% 100%);
}

This creates a narrowing-then-widening text channel, similar to what you might see in high-end editorial design. The text appears to flow through an hourglass shape between the two floats.

Browser Support and Performance

Browser support for shape-outside is excellent in 2026, with all major browsers supporting it fully. The property is hardware-accelerated and has minimal performance impact since the shape calculation happens during layout, not during paint or composite phases.

For progressive enhancement, wrap shape-outside styles in a feature query:

@supports (shape-outside: circle(50%)) {
  .shaped-float {
    shape-outside: circle(50%);
    shape-margin: 16px;
  }
}

Browsers that do not support shape-outside simply display the standard rectangular float — the layout still works, just without the curved text wrapping. This makes it a safe progressive enhancement with zero downside.

Combining shape-outside with Other CSS Properties

The real power of shape-outside emerges when you combine it with other CSS layout and visual properties. Build complete magazine-quality layouts by pairing it with these techniques:

• CSS Clip Path Generator for matching visual clipping to your shape boundaries
• CSS Animation Generator for animating shapes on scroll or hover
• CSS Gradient Text Generator for styled text that flows around shapes
• CSS Writing Mode Guide for vertical text combined with shaped floats
• CSS Media Query Generator for responsive shape adjustments across screen sizes

The AI CSS Shape Outside Generator gives you a visual canvas for designing text wrapping shapes. Plot polygon points by clicking, adjust circle and ellipse radii with sliders, preview with real text content, and export the complete CSS including shape-margin and matching clip-path declarations.