This video tutorial shows how to create a dynamic inner banner section with rays gradient style in WordPress using the Elementor plugin. We first installs Elementor and Elementor Pro plugins. Then, we create a new file and add a new container. In the container, we add a hero & content container then import the rays gradient styles. Finally, we make it dynamic and responsive.
Watch Now: Video will be soon
Elementor Pro for Rs.249: https://resources.mdasik.com/product/elementor-pro/
Source Code:
.ib-hero {
width: 100%;
height: 100%;
position: relative;
display: flex;
place-content: center;
place-items: center;
background-image: repeating-linear-gradient(
100deg,
#fff 0%,
#fff 7%,
transparent 10%,
transparent 12%,
#fff 16%
), repeating-linear-gradient(
100deg,
#60a5fa 10%,
#e879f9 15%,
#60a5fa 20%,
#5eead4 25%,
#60a5fa 30%
);
background-size: 300%, 200%;
background-position: 50% 50%, 50% 50%;
filter: blur(10px) invert(100%);
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
}
.ib-hero::after {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
100deg,
#fff 0%,
#fff 7%,
transparent 10%,
transparent 12%,
#fff 16%
), repeating-linear-gradient(
100deg,
#60a5fa 10%,
#e879f9 15%,
#60a5fa 20%,
#5eead4 25%,
#60a5fa 30%
);
background-size: 200%, 100%;
animation: smoothBg 60s linear infinite;
background-attachment: fixed;
mix-blend-mode: difference;
}
/*custom*/
@keyframes smoothBg {
from {
background-position: 50% 50%, 50% 50%;
}
to {
background-position: 350% 50%, 350% 50%;
}
}
/*:has(:checked) {*/
/* background: #000;*/
/*}*/
.ib-hero.dark,
.ib-hero.dark::after {
filter: blur(10px) opacity(50%) saturate(200%);
}
.ib-hero.dark {
background-image: repeating-linear-gradient(
100deg,
#000 0%,
#000 7%,
transparent 10%,
transparent 12%,
#000 16%
), repeating-linear-gradient(
100deg,
#60a5fa 10%,
#e879f9 15%,
#60a5fa 20%,
#5eead4 25%,
#60a5fa 30%
);
}
.ib-hero.dark::after {
background-image: repeating-linear-gradient(
100deg,
#000 0%,
#000 7%,
transparent 10%,
transparent 12%,
#000 16%
), repeating-linear-gradient(
100deg,
#60a5fa 10%,
#e879f9 15%,
#60a5fa 20%,
#5eead4 25%,
#60a5fa 30%
);
}
.ib-content {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
place-content: center;
place-items: center;
flex-flow: column;
gap: 4.5%;
text-align: center;
mix-blend-mode: difference;
-webbkit-mix-blend-mode: difference;
filter: invert(1);
}
Class I Use in this video:
Light Mode:Â ib-hero, ib-content
Dark Mode:Â ib-hero dark, ib-content
