Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

CSS Glow Effect Animation

Muhammad Asif by Muhammad Asif
January 21, 2023
in CSS Animation
0
CSS Glow Effect Animation
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

The glow effect is one of the eye catchy and attention-capturing elements on a webpage. This effect is useful to point out important section or attracts users to particular content. In this tutorial, we’re going to create a CSS gradient color glow effect with spin animation.

We’ll visualize this animation with the help of a card element. Basically, you can integrate this glow effect into buttons, navigations, or any other HTML element. Similarly, you can reveal this glow effect on several events like click, hover, or focus. Here, I will demonstrate a beautiful glowing animation with a card element, I named this a magic card.

The idea is simple, we’ll create a simple card component using a div element. Then we’ll apply the gradient color glowing effect using CSS background-image property. After that, we’ll use the CSS animation keyframes to rotate the colors around the card. Additionally, I will use the hover pseudo class to stop the animation on mouseover. So, let’s get started with HTML code to execute this idea.

The HTML Code

In order to create a glow effect, we need an element to visualize the glowing animation. For this purpose, we’ll create a card element and implement a glowing effect on it. So, create a div element with a class name "card" and place your content inside it. In my case, I’m just placing “Magic Card”, a sample text inside it. You can put anything like text, image, video, or any HTML element.

<div class="card">
  Magic Card
</div>

You can also integrate this glow effect with your existing elements. To do so, you need to modify the CSS code blocks according to the class name of your element.

The CSS Styles for Glow Effect Animation

In CSS, define the root variables for the height and width of the card element. Usually, we can define the width inside the card’s CSS block. Still, I kept them separate for easy customization for the card dimension as these values will be repeatedly used in glowing effect animation.

:root {
  --card-height: 320px;
  --card-width: 480px;
}

Now, select the "card" class and define the background color according to your choice. In my case, I set a black color with a shade of dark blue matching the glowing gradient color. Define the card dimension using the CSS variable function and display it as flex. Justify the content to the center using justify-content flex property. Similarly, define the center value for align-items and text-align property.

Here, the important thing to define is position property with the relative position as it will handle the absolute elements of the glow effect. Besides this, the padding, margin, font size and can be defined with custom values as per your requirements.

.card {
  background: #191c29;
  width: var(--card-width);
  height: var(--card-height);
  padding: 3px;
  position: relative;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  font-size: 1.5em;
  color: rgb(88 199 250 / 0%);
  cursor: pointer;
  font-family: cursive;
  color: rgb(88 199 250 / 100%);
  margin: 10px auto;
}

Likewise, target the card class with the hover pseudo selector and define its color and transition values as follows. Basically, the hover styles are optional, I just used this to stop the animation on the mouseover event. The card before and after pseudo classes contains the glowing effect that we’ll define in the next step.

.card:hover {
  color: rgb(88 199 250 / 100%);
  transition: color 1s;
}
.card:hover:before, .card:hover:after {
  animation: none;
  opacity: 0;
}

After that, select the card class with before and after pseudo selector and define the content property with an empty string value. The content property is necessary to display the glow effect, so don’t skip this. Define the width, height, and border-radius property as mentioned below.

The necessary properties are position with absolute value and top animation with the spin value. We’ll define the keyframes for the spin animation in the next step. Similarly, we’ll use the CSS background-image property with the linear-gradient value to create an attractive gradient color glowing effect.

.card::before {
  content: "";
  width: 104%;
  height: 102%;
  border-radius: 8px;
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    position: absolute;
    z-index: -1;
    top: -1%;
    left: -2%;
    animation: spin 2.5s linear infinite;
}
.card::after {
  position: absolute;
  content: "";
  top: calc(var(--card-height) / 6);
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
  width: 100%;
  margin: 0 auto;
  transform: scale(0.8);
  filter: blur(calc(var(--card-height) / 6));
  background-image: linear-gradient(
    var(--rotate)
    , #5ddcff, #3c67e3 43%, #4e00c2);
    opacity: 1;
  transition: opacity .5s;
  animation: spin 2.5s linear infinite;
}

Finally, define the CSS animation keyframes as follows in order to animate the gradient glowing colors. By default, the colors will be rotated clock-wise from 0 degrees to 360 degrees. If you want to animate the glowing effect ant-clock-wise, just define the negative angle values (-36odeg).

@property --rotate {
  syntax: "<angle>";
  initial-value: 132deg;
  inherits: false;
}
@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

That’s all! I hope, you have successfully created a glow effect animation in CSS. If you have any questions or suggestions, let me know by the comment below.

Demo Download
Previous Post

CSS Animation Ticker Tape of Images

Next Post

Pure CSS3 Slide Down Toggle

Next Post
Pure CSS3 Slide Down Toggle

Pure CSS3 Slide Down Toggle

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
CSS Glow Button Hover Effect

Pure CSS Button Shine/Glow Effect on Hover

December 23, 2019
Easy to Apply CSS Image Hover Transition Effects

CSS Image Hover Transition Effects

December 5, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.