Animated Background

An animated background changes color from one color to another infinitely. Provide some padding, add some texts and change the colors to your liking and boom... your animated gradient is ready!

Show details...

Syntax

{{< animated-background
animation-duration="Any number"
background-end-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
background-start-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)"
border-radius="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
is-animation-enabled="true|false"
is-full-width="true|false"
margin="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
overlay-gradient-angle="Any number"
overlay-gradient-stops="any background or gradient"
padding="Top, right, bottom, left property in px,em,rem or %. Ex. 15px, 0, 15px, 0 would imply 15px top, 0px right, and so on."
text-color="Any valid color in rgba, hex, hsla, hwba (note: every format allows setting alpha/opacity.)" >}}

The actual message goes here

{{< /animated-background >}}

Samples

I don’t try to intimidate anybody before a fight. That’s nonsense. I intimidate people by hitting them. 🔥

Mike Tyson

I don’t try to intimidate anybody before a fight. That’s nonsense. I intimidate people by hitting them. 🔥

Mike Tyson

I don’t try to intimidate anybody before a fight. That’s nonsense. I intimidate people by hitting them. 🔥

Mike Tyson