Blob Background

Soft organic blob shapes as a CSS background using radial-gradient and border-radius — no SVG or JavaScript.

Blob Background

Widely Supported

colorno-js

Quick implementation

.blob-background {
  position: relative;
  width: 100%;
  height: 300px;
  background: var(--bg);
  overflow: hidden;
  border-radius: var(--radius);
}

/* Create the first blob */
.blob-background::before {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background: oklch(0.65 0.25 250);
  border-radius: 50%;
  filter: blur(40px);
  top: -50px;
  left: -50px;
  opacity: 0.6;
}

/* Create the second blob */
.blob-background::after {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: oklch(0.65 0.25 320);
  border-radius: 50%;
  filter: blur(40px);
  bottom: -60px;
  right: -60px;
  opacity: 0.6;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

Act as a senior CSS developer. Create a "Blob Background" effect using only CSS.

Requirements:
1. Use a container with `position: relative` and `overflow: hidden`.
2. Use `::before` and `::after` pseudo-elements to create two distinct organic shapes.
3. Use `border-radius: 50%` and `filter: blur(40px)` to soften the edges.
4. Use `oklch()` colors for the blobs to ensure modern color vibrancy.
5. Ensure the base background is `var(--bg)` so content remains readable.
6. Add a simple floating animation using `@keyframes` and `transform`.
7. Include a `@media (prefers-reduced-motion: reduce)` query to disable animation.

Output the CSS only. Do not use SVG or JavaScript.

Why this matters in 2026

Organic shapes break the monotony of rigid grid layouts without the performance cost of heavy SVG assets or JavaScript libraries. This technique leverages the GPU-accelerated filter: blur() and transform properties to create depth and visual interest that feels native to the browser.

The logic

The effect relies on stacking context and layering. We use pseudo-elements to generate the shapes, keeping the HTML clean. By setting a large border-radius (50%) and applying a significant blur filter, hard circle edges dissolve into soft, amorphous blobs. The z-index ensures the content sits above the decorative background.

Accessibility & performance

Since the blobs are decorative, they do not interfere with screen readers or keyboard navigation. The animation uses transform and opacity, which are performant compositing properties. A prefers-reduced-motion media query is included to respect user preferences for motion sensitivity.