Free Tool

Gradient Generator

Create beautiful CSS gradients for Squarespace sections and backgrounds. Pick from presets or build your own, then copy the code straight into your site.

Why this matters

Solid color backgrounds are boring. Gradients add movement, depth, and personality to your sections. This tool lets you build beautiful gradients visually — pick your colors, adjust the angle, and copy the CSS. No design degree required.

Preview

Controls

Presets

CSS Output

background: linear-gradient(135deg, #0c4a6e 0%, #0891b2 100%);

Squarespace Usage

Paste any of the snippets below into your Squarespace Custom CSS panel (Design → Custom CSS) or into a Code Block to apply the gradient to sections on your site.

/* Apply to a Squarespace section */
.page-section {
  background: linear-gradient(135deg, #0c4a6e 0%, #0891b2 100%) !important;
}

/* Target a specific section by index */
.page-section:nth-child(2) {
  background: linear-gradient(135deg, #0c4a6e 0%, #0891b2 100%) !important;
}

/* Target by section ID (right-click section in Squarespace, inspect) */
#block-yui_3_17_2_1_xxxx {
  background: linear-gradient(135deg, #0c4a6e 0%, #0891b2 100%) !important;
}

/* Apply as a full-page background */
body {
  background: linear-gradient(135deg, #0c4a6e 0%, #0891b2 100%) !important;
}

Section Preview

See how the gradient looks as a Squarespace section background with text overlay. Check that headings and body copy remain readable.