GET A QUOTE

How to Create a Stunning Rays Gradient Banner

rays gradient banner

Creating a beautiful rays gradient banner can make your website look more attractive and professional. This step-by-step guide will help you understand how to create a rays gradient banner using simple HTML and CSS. We will use the keywords “rays gradient banner,” “gradient banner HTML,” “source code,” “codepen,” and “rays background codepen” throughout the article.

A gradient banner is a web design element with a gradient background with rays of light radiating from a central point. This effect will grab the attention of the visitors and make your website stand out.

Table of Contents

HTML and CSS Code for Rays Gradient Banner

Here is the complete code for creating a rays gradient banner. Let’s break it down step by step.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rays Background - Md Asik</title>
    <style>
        /* Define custom properties for animation */
@property --blink-opacity {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@keyframes blink-animation {
  0%,
  100% {
    opacity: var(--blink-opacity, 1);
  }
  50% {
    opacity: 0;
  }
}

/* Base styles */
:root {
  font-family: Inter, sans-serif;
  --stripe-color: #fff;
  --bg: var(--stripe-color);
  --maincolor: var(--bg);
}

body {
  width: 100cqw;
  min-height: 100cqh;
  display: flex;
  place-content: center;
  place-items: flex-start center;
  background: var(--bg);
}

/* Animation for smooth background movement */
@keyframes smoothBg {
  from {
    background-position: 50% 50%, 50% 50%;
  }
  to {
    background-position: 350% 50%, 350% 50%;
  }
}

.wrapper {
  width: 100%;
  height: auto;
  position: relative;
}

.hero {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;
  --stripes: repeating-linear-gradient(
    100deg,
    var(--stripe-color) 0%,
    var(--stripe-color) 7%,
    transparent 10%,
    transparent 12%,
    var(--stripe-color) 16%
  );

  --rainbow: repeating-linear-gradient(
    100deg,
    #60a5fa 10%,
    #e879f9 15%,
    #60a5fa 20%,
    #5eead4 25%,
    #60a5fa 30%
  );
  background-image: var(--stripes), var(--rainbow);
  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%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--stripes), var(--rainbow);
  background-size: 200%, 100%;
  animation: smoothBg 60s linear infinite;
  background-attachment: fixed;
  mix-blend-mode: difference;
}

:has(:checked) {
  --stripe-color: #000;
}

:has(:checked) .hero,
:has(:checked) .hero::after {
  filter: blur(10px) opacity(50%) saturate(200%);
}

.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;
  -webkit-mix-blend-mode: difference;
  filter: invert(1);
}

.h1--scalingSize {
  font-size: calc(1rem - -5vw);
  position: relative;
}

#switch {
  appearance: none;
  -webkit-appearance: none;
  opacity: 0;
}

[for="switch"] {
  cursor: pointer;
  transition: 0.15s linear(0 0%, 0.16 16.85%, 0.32 31.73%, 1 100%);
  will-change: transform, font-weight;
  padding: 0.5rem;
}

[for="switch"]:where(:hover, :active, :focus-within) {
  transition: 0.3s ease;
  animation: animSwitch 0.2s alternate;
}

@keyframes animSwitch {
  50% {
    transform: scale(1.2);
    font-weight: 900;
  }
}

.icon {
  width: 1lh;
  height: 1lh;
  aspect-ratio: 1/1;
  padding: 0.25em 0.35rem;
  border-radius: calc(1px / 0);
  border: 1px dashed;
  --blink-opacity: 1;
  animation: blink-animation 2s ease-in-out infinite running;
}

.h1--scalingSize::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: white;
  text-shadow: 0 0 1px #ffffff;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: white;
  -webkit-mask: linear-gradient(#000 0 0) luminance;
  mask: linear-gradient(#000 0 0) luminance, alpha;
  backdrop-filter: blur(19px) brightness(12.5);
  -webkit-text-stroke: 1px white;
  display: flex;
  margin: auto;
  z-index: 1;
  pointer-events: none;
}

    </style>
</head>
<body>
    <section class='wrapper'>
        <div class='hero'>
        </div>
        <div class='content'>
          <h1 class='h1--scalingSize' data-text='An awesome title'>An awesome title</h1>
          <input type='checkbox' id='switch'>
          <label for='switch'><span><span class='icon'>→</span> switch bg</span></label>
        </div>
      </section>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

HTML Structure: The HTML file starts with the basic structure, including the <!DOCTYPE html>, <html>, <head>, and <body> tags. The title of the page is set to “Rays Background – Md Asik.”

CSS Styles: The CSS styles are defined within the <style> tag inside the <head> section.

  • Custom Properties: The --blink-opacity custom property is defined using @property to control the blinking animation’s opacity.
  • Base Styles: The :root selector sets the default font family and colors. The body selector sets the overall layout and background color.
  • Animations: Keyframes for blink-animation and smoothBg are defined to create smooth background movement and blinking effects.
  • Wrapper and Hero Classes: The .wrapper class sets the overall structure. The .hero class defines the repeating linear gradients for stripes and rainbow effects, along with various properties like background-image, background-size, and filter.

Content and Heading: The .content class styles the content inside the banner, including the heading with a scaling size effect and the switch button with custom animations.

Hero Section: The hero section contains the background effects. The background-image property uses repeating linear gradients to create stripes and rainbow patterns. The mask-image property and filter are used to create a radial gradient and blur effects.

Content Section: The content section includes a heading and a checkbox switch to change the background. The heading uses the data-text attribute to display a dynamic title. The checkbox and label allow users to toggle the background effect.

Switch Button: The switch button is styled to appear hidden, and the label associated with it includes a cursor pointer and animation for a smooth transition.

Icon and Animation: The .icon class and blink-animation keyframe create a blinking effect for the icon inside the switch button.

Responsive Design: The CSS code ensures that the banner is responsive and adapts to different screen sizes, making it look good on both desktop and mobile devices.

Rays Gradient Banner for Elementor

This CSS code is designed to style elements, particularly within an Elementor page builder environment. 

				
					
.hero {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  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%);
}

.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%;
  }
}


.hero.dark,
.hero.dark::after {
  filter: blur(10px) opacity(50%) saturate(200%);
}

.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%
  );
}

.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%
  );
}
.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);
}
Click here to download the file
DOWNLoAD NoW

Video Preview

rays background.zip

Conclusion

By following this step-by-step guide, you can create a stunning rays gradient banner for your website using Elementor. The combination of HTML and CSS allows you to achieve a professional-looking design with smooth animations and interactive elements. Feel free to experiment with the code and customize it to fit your needs. This unique and easy-to-index content will help your website stand out and attract more visitors.

I hope this code helps you How to Create a Stunning Rays Gradient Banner. If you have any doubts or problem with the code, comment below to find the solutions. Also share this blog if you find this useful.

Want to build professional website for your Business or Store, Get a free quote here

Click here to get Premium Plugins and Themes at rs.249. Get 20% Off on your first order “WELCOME20”

Related Posts

Write a comment

Recent Posts

Categories

Categories

Tags

Tags
contact form 7 css css tutorial custom post type Gravator Javascript owl carousel slider woocommerce wordpress wordpress hooks xampp
SCAN ME TO GET CURRENT PAGE LINK
Md Asik QR Code
Thank you for submitting. We’ll get back to you shortly
Back to Home