Modern CSS Backgrounds: Gradients, Glassmorphism and Waves

A single linear-gradient is the simplest background upgrade, but layering multiple radial-gradient values creates rich 'mesh' effects without images. Each layer is a soft colored glow positioned at a different corner, blended over a base color.

background:
  radial-gradient(at 20% 20%, hsl(160 80% 50% / .5) 0, transparent 50%),
  radial-gradient(at 80% 0%, hsl(200 90% 60% / .4) 0, transparent 50%),
  hsl(222 47% 11%);

The frosted-glass look combines a semi-transparent background, backdrop-filter: blur() and a subtle light border. It only works when there is something colorful behind the card — glass on a flat background just looks grey.

.glass {
  background: hsl(0 0% 100% / .08);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid hsl(0 0% 100% / .15);
  border-radius: 16px;
}

Curved section dividers break the boxy feel of long landing pages. The most robust technique is an inline SVG path positioned at the bottom of a section, colored to match the next section. Our CSS wave and shape divider generators output ready-to-paste SVG.

backdrop-filter is GPU-intensive; avoid applying it to large scrolling areas or dozens of elements. Animated gradients should animate transform or opacity rather than background-position where possible, and respect prefers-reduced-motion.

Text over translucent or gradient backgrounds must still meet a 4.5:1 contrast ratio at every point. Test the lightest area behind your text with our contrast checker, and add a slightly darker overlay if needed.

• CSS Gradient
• CSS Wave Generator
• Section Shape Divider
• Glassmorphism CSS
• Mesh Gradient
• Aurora Background