Moving Background

This is the background image and source of the colors

This is just a placeholder headline.

Traditionally our industry has used Lorem Ipsum, which is placeholder text written in Latin. Unfortunately, not everyone is familiar with Lorem Ipsum and that can lead to confusion. I can’t tell you how many times clients have asked me why their website is in another language!

We will replace it once your website copy is finalized.

Top example:

Add bg to your container and change the colors in the CSS to meet you needs. I added an abstract image as an experiment and the results are interesting.

Copy to Clipboard

.bg {
  position:relative;
  overflow:hidden;
}
.bg:before{
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background:radial-gradient(circle farthest-side at center center, rgba(165, 1, 186, 0.3), rgba(208, 255, 1, 0.3), rgba(244, 152, 51, 0.3), rgba(70, 22, 183, 0.3), rgba(18, 42, 116, 0.3), rgba(32, 248, 125, 0.3)), url(https://awb4wp.com/wp-content/uploads/2022/12/kamuyoch3ie.jpg) center bottom no-repeat;
  background-size: 200% 200%;
  -webkit-animation: gradientbg 60s ease infinite;
  -moz-animation: gradientbg 60s ease infinite;
  animation: gradientbg 60s ease infinite,rotationbg 120s linear infinite;
}
.text-gradient {
  background-image: linear-gradient(
    30deg,
    rgba(198, 0, 116, 1) 10%,
    rgba(255, 215, 45, 1.0) 70%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
}

@media screen and (prefers-reduced-motion: no-preference) {

@-webkit-keyframes gradientbg {
    0%{background-position:0% 7%}
    30%{background-position:530% 33%}
       60%{background-position:60% 63%}
    100%{background-position:0% 7%}
}
@-moz-keyframes gradientbg {
    0%{background-position:0% 7%}
    50%{background-position:50% 54%}
    100%{background-position:0% 7%}
}
@keyframes gradientbg {
    0%{background-position:0% 7%}
       50%{background-position:100% 100%}
    100%{background-position:0% 7%}
}
@keyframes rotationbg{
  from{ transform:rotate(0deg);}
to{ transform:rotate(360deg);}
  }
}

Heading text:

just target your heading level. Since I am using the glass effect on the column (glassed), I just added glassed h2 to my custom CSS. I used colors from the background image

Copy to Clipboard

.glassed h2{
  background: radial-gradient(circle farthest-side at bottom right, #0040B8, #CC6946, #2D176B, #438980, #B17C9E, #FD9F49);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0px 2px 2px rgba(0,0,0,0.3);
  background-size: 1000% 500%;
  -webkit-animation: gradientbg 30s ease infinite;
  -moz-animation: gradientbg 30s ease infinite;
  animation-name: gradientbg;
  animation-duration: 30s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}    
@-webkit-keyframes gradientbg {
  0%{background-position:0% 7%}
  50%{background-position:100% 94%}
  100%{background-position:0% 7%}
}
@-moz-keyframes gradientbg {
  0%{background-position:0% 7%}
  50%{background-position:100% 94%}
  100%{background-position:0% 7%}
}
@keyframes gradientbg {
  0%{background-position:0% 7%}
  50%{background-position:100% 94%}
  100%{background-position:0% 7%}
}

.glassed{
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  background-color: rgba(220,220,220,0.6);
  border-radius: 32px;
  box-shadow: 0px 10px 21px -10px rgba(0,0,0,0.6);
}

Taking Full Advantage of the Avada Image Element

Avada 7.11.7

Official Avada Resources

Taking Full Advantage of the Avada Image Element

Avada 7.11.7

Official Avada Resources

This is just a placeholder headline.

We will replace it once your website copy is finalized.

This site is…

ABOUT COOKIES

THIRD PARTY EMBEDS

TRACKING COOKIES

Taking Full Advantage of the Avada Image Element

Avada 7.11.7

Official Avada Resources

Taking Full Advantage of the Avada Image Element

Avada 7.11.7

Official Avada Resources

Moving Background

This is just a placeholder headline.

We will replace it once your website copy is finalized.

Avada on YouTube

ABOUT COOKIES

THIRD PARTY EMBEDS

TRACKING COOKIES