Create float wrapping shapes with circle, ellipse, polygon, and image-based shape-outside values.
Define the contour that adjacent inline content follows around a CSS float. The generator supports circle(), ellipse(), polygon(), and image-based shape-outside values, allowing curved or irregular wrapping instead of the float's usual rectangular boundary. Polygon points represent positions within the selected reference box, while an image shape follows its transparency. The common surprise is that shape-outside changes text wrapping only. It neither crops the element nor works unless the shaped element participates as a float.
Circle and ellipse values combine radii with a center position. A polygon is an ordered list of x and y coordinate pairs whose connected edges form the wrapping contour. Percentages scale with the shape's reference box, so they are generally more responsive than fixed lengths. If a basic shape omits an explicit shape box, shape-outside uses the float's margin box.
An image-based shape uses pixel transparency to determine the float area. Transparent regions permit lines to extend farther toward the floated element, while sufficiently opaque regions exclude text. An opaque rectangular background therefore produces a rectangular contour even when the pictured subject looks irregular. Images selected in this browser tool are not uploaded, but any image reference used in deployed CSS must remain available to the page.
First confirm that shape-outside is applied to the element with float: left or float: right. It has no wrapping effect on an otherwise normal block, flex item, or grid item. For image shapes, also inspect the transparency: an image with an opaque background describes a rectangle, regardless of the visible subject inside it.
No. shape-outside defines the exclusion area used when laying out nearby inline content; it does not clip pixels, backgrounds, or borders. If the element must visibly match the wrapping contour, add an independently compatible clip-path or border-radius. Matching them may require maintaining two declarations because their reference boxes and accepted image behavior are not identical.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.