Let's get a gradient on this orb!
Let's get a gradient on this orb!
Add a gradient background to Squarespace’s art backgrounds
Get the full tutorial here.
Use this resource to get the CSS code for any gradient you want to put on your site!
Classic editor version
A few lines of code need to be added for the gradient to fill the full section if you’re using a classic Squarespace section (as opposed to a Fluid section).
Let's get a gradient on this orb!
Let's get a gradient on this orb!
More gradient inspo
Gradient used here:
background: linear-gradient(180deg,rgba(107, 107, 107, 0) 50%, rgba(107, 107, 107, 1) 92%, rgba(66, 44, 52, 1) 100%);
Let's get a gradient on this orb!
Let's get a gradient on this orb!
More gradient inspo
This one has the transparent part of the gradient in the center.
Gradient used here:
background: linear-gradient(180deg,rgba(85, 35, 37, 1) 0%, rgba(141, 58, 80, 1) 21%, rgba(181, 199, 171, 0) 41%, rgba(181, 199, 171, 0.14) 51%, rgba(73, 88, 150, 1) 74%, rgba(85, 35, 37, 1) 100%);
Let's get a gradient behind this orb!
Let's get a gradient behind this orb!
More gradient inspo
A radial gradient can create a really cool frame around your content!
Gradient used here:
background: radial-gradient(circle,rgba(217, 236, 206, 0) 45%, rgba(181, 199, 171, 0.85) 70%, rgba(255, 85, 33, 1) 82%, rgba(85, 35, 37, 1) 87%);
Let's get a gradient behind this orb!
Let's get a gradient behind this orb!
More gradient inspo
This one has gradient as a little accent coming from the corner.
Gradient used here:
background: linear-gradient(328deg,rgba(73, 88, 150, 1) 10%, rgba(157, 76, 37, 0) 35%);