Web

Blob shapes in HTML and CSS

Three ways to put a blob on a page: inline SVG, an img tag, or a CSS background. Plus sizing, clip-path, accessibility and file size.

Updated September 18, 2026

Every blob exports as one SVG path inside a 0 0 500 500 viewBox. The way you place that path on the page decides whether you can restyle it later, so pick the method that matches the job.

Inline SVG

Paste the markup into the page when the shape has to respond to CSS or JavaScript. Fill, stroke and opacity all stay addressable, and the browser makes no extra request.

<svg viewBox="0 0 500 500" width="240" height="240" aria-hidden="true">
  <path
    d="M413,84.5Q476,169,447,249.5Q418,330,349,383Q280,436,204,412Q128,388,96,314Q64,240,105,169.5Q146,99,220,74.5Q294,50,353.5,67.25Q413,84.5,413,84.5Z"
    fill="#1e8fe5"
  />
</svg>

The trade-off is that the same bytes ship with every page that uses the shape.

The img tag

Download the SVG file and reference it when the blob is decoration that repeats across pages, so it can be cached once.

<img src="/images/blob.svg" alt="" width="240" height="240" />

CSS cannot reach inside a file referenced this way, so choose the color before you export.

CSS background-image

A data URI keeps the shape in the stylesheet. Encode # as %23, < as %3C and > as %3E, and use single quotes inside the URL so the outer double quotes survive.

.panel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Cpath d='M413,84.5Q476,169,447,249.5Q418,330,349,383Q280,436,204,412Q128,388,96,314Q64,240,105,169.5Q146,99,220,74.5Q294,50,353.5,67.25Q413,84.5,413,84.5Z' fill='%231e8fe5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

Sizing and responsiveness

The viewBox gives the shape a 1:1 intrinsic ratio, so setting one dimension is enough. Let the other follow.

.blob {
  width: clamp(12rem, 28vw, 30rem);
  height: auto;
}

Because the path is scaled by the viewport rather than resampled, a blob stays sharp at any size. Reserve the box with an aspect-ratio: 1 rule if the shape loads after the text around it.

Using clip-path

clip-path: path() reads pixel coordinates in the element’s own box, not viewBox units. A 500-unit path therefore needs a 500 by 500 element.

.portrait {
  width: 500px;
  height: 500px;
  clip-path: path("M413,84.5Q476,169,447,249.5Q418,330,349,383Q280,436,204,412Q128,388,96,314Q64,240,105,169.5Q146,99,220,74.5Q294,50,353.5,67.25Q413,84.5,413,84.5Z");
}

At any other size, either scale every number in the path by the ratio you need (240 divided by 500 is 0.48) or point at an SVG clipPath, which can do the scaling for you.

<svg width="0" height="0" aria-hidden="true">
  <clipPath id="blob-clip" clipPathUnits="objectBoundingBox" transform="scale(0.002)">
    <path d="M413,84.5Q476,169,447,249.5Q418,330,349,383Q280,436,204,412Q128,388,96,314Q64,240,105,169.5Q146,99,220,74.5Q294,50,353.5,67.25Q413,84.5,413,84.5Z" />
  </clipPath>
</svg>

.portrait { clip-path: url(#blob-clip); }

The factor 0.002 is 1 divided by 500, which maps the path onto the 0 to 1 bounding-box space so the clip tracks the element at any size. On a non-square element the shape stretches with the box, which is usually what you want for a photo crop.

Accessibility

A blob is almost always decoration. Mark it as such: aria-hidden="true" on inline SVG, an empty alt on an image. Screen readers then skip it.

When the shape does carry meaning, give it a name instead.

<svg viewBox="0 0 500 500" role="img" aria-labelledby="badge-title">
  <title id="badge-title">Highlight behind the product photo</title>
  <path d="M413,84.5Q476,169,447,249.5Q418,330,349,383Q280,436,204,412Q128,388,96,314Q64,240,105,169.5Q146,99,220,74.5Q294,50,353.5,67.25Q413,84.5,413,84.5Z" fill="#0668b6" />
</svg>

Performance notes

A solid blob is one path element with no dependencies, which keeps the markup under 1 KB before compression. Gradients and patterns add a short defs block. If you animate a blob, animate transform and opacity rather than width and height, and respect prefers-reduced-motion.

Common questions

Can I recolor an SVG blob with CSS? Only when the markup is inline. Set fill="currentColor" on the path and the shape follows the color property of its container. A blob loaded through an img tag or a background image keeps the color it was exported with.

Why does my clip-path cut the wrong part of the element? path() works in CSS pixels from the top-left corner of the element’s border box, so a 500-unit path on a 300 pixel box clips everything past 300. Size the element 500 by 500, scale the coordinates, or switch to the clipPathUnits="objectBoundingBox" version above.

Which format should I use for a hero background? SVG, unless the blob is filled with a photo. The file is small, it scales to any viewport, and it stays crisp on high-density screens. Export PNG only when the destination cannot read SVG.