Animated Gradient Cover Background

To use animated background gradients to cover blocks we use this CSS, and apply the class .has-animated-bg

In this application, it is expecting a background image, if no image is required a spacer.gif file could be used and opacity on the background gradient can be set to 100.

.has-animated-bg .wp-block-cover__gradient-background {
	@include breakpoint(large) {
		background-size: 400% !important;
		animation: bganimation 12s ease infinite;
	}
}
@keyframes bganimation {
  0% {
    background-position: 0% 50%;
  }
	50% {
    background-position: 100% 50%;
  }
	100% {
    background-position: 0% 50%;
  }
}

Title

Title

Title

Search the site


Address

123 Main Street
Town
City
P05T C0D3

Tel: 01234 567 899

Mob: 01234 567 899

Email: ben@gomopress.com


Copyright 2023. Blah blah blah Company Limited