Animated gradient backgrounds on Squarespace.

Animated gradient backgrounds might seem a little complicated, but they’re actually a snap with CSS and your section ID.

Take a look at the code below:

section[data-section-id="YOUR_SECTION_ID_GOES_HERE"] .section-background {
  background: linear-gradient(270deg, #550192, #9929ea, #550192) !important;
  background-size: 200% 100% !important;
  animation: gradientShift 32s ease infinite !important;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

In this example, I’m using some tasteful dark and light purples: #550192 #9929ea along with a simple linear gradient. But we can play around with colors, direction, or gradient type to create all kinds of effects, from very subtle to flashy and dramatic.

Want to see what it looks like? This animated gradient is stunning!Live previewThe purple gradient above, sped up for the preview.

Another example

Let’s take a look at another example below:

section[data-section-id="YOUR_SECTION_ID_GOES_HERE"] .section-background {
  background:
    linear-gradient(217deg, rgba(142,21,40,0.8), transparent 70%),
    linear-gradient(127deg, rgba(185,44,66,0.8), transparent 70%),
    linear-gradient(336deg, rgba(229,68,92,0.8), transparent 70%),
    linear-gradient(145deg, #350f04, #581216, #8e1528, #b92c42, #e5445c) !important;
  background-size: 400% 400% !important;
  animation: meshRotate 15s ease infinite !important;
}

@keyframes meshRotate {
  0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
  25% { background-position: 100% 50%, 0% 100%, 100% 0%, 50% 0%; }
  50% { background-position: 50% 100%, 50% 50%, 0% 50%, 100% 100%; }
  75% { background-position: 0% 50%, 100% 100%, 50% 0%, 0% 0%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
}

In this example, I’m using five different reds:

Double-click a swatch to copy its hex.

and four overlapping gradients at different angles to create a cool mesh effect. Very classy — just like a fruity technology company. Again, you can play around with layers, gradient types, and animation speeds and you’ll see it can dramatically change the final result.

Want to see what this one looks like in action? Check it out here!Live previewThe five-red mesh above, sped up for the preview.

Lots of expensive plugins play this up like it’s a complicated feature, but anyone can add animated backgrounds on Squarespace with a little CSS and their section ID.

Until next time, Squarespace friends.