Curved Wave Headers

What You'll Create

A visually striking header in Squarespace with curved, wave-like bottom edges instead of standard straight lines. The technique uses CSS masking with radial gradients to create consistent scalloped waves, or custom SVG masks for unique curve designs.

The Problem It Solves

Squarespace headers have rigid, straight edges by default. Creating curved transitions requires image assets that don't scale well. This CSS-only solution creates resolution-independent curved headers that adapt to any screen size.

Perfect For

Playful brand websites, children's sites, wellness brands, creative agencies, organic product shops.

What Makes This Different

Two approaches provided: Radial gradient creates consistent waves with 80px spacing between each curve. Custom SVG option allows for unique curve designs that scale to cover the full header width. Header background set to transparent with 40px bottom padding for wave overflow space.

Details

• Section Type: Fluid & Classic

• Code Type: CSS

• Prerequisites: Header Style set to Solid with appropriate color theme. CSS in Header Code Injection or Custom CSS panel.

• Toolkit Title: Curved Headers

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support