Animated Gradient Quote Block

Install Steps

Animated Gradient Quote Block

Submitted by Moov Labs Works with all template families

AnimatedGradientQuote.gif

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Animated Gradient Quote Block //

.sqs-block-quote {
  color: white;
  background: #000000;
  padding: 20px !important;
  border-radius: 10px !important;
  background-image: linear-gradient(-45deg, #53D6FF, #666BE1, #E45372, #F07C63) !important;
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 5s ease infinite !important;
}


// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

Step Three

Change the #53D6FF, #666BE1, #E45372, and #F07C63 color values to the colors of your choice.

Adjust the color, padding, border, border radius, and box shadow values to your liking.

Do not change any values to the Animation Keyframes.

Save and refresh the page. 👍

Moov Labs