Create an Animated Glowing Ring Card with HTML and CSS | Tutorial

Create a fully functional glowing ring card with an animated gradient using HTML and CSS. This tutorial will guide you through each step of the code, explaining each part along the way. By the end, you’ll have a visually stunning component that will make your web designs pop.

Step 1: HTML Structure

The HTML structure is simple. We only need a single <div> element with a class name of glow-card to hold the content of our card.

<div class="glow-card">
 content is here
</div>

This <div> will act as the card, and the glowing ring effect will be applied to it using CSS.

Step 2: Setting Up the CSS Properties

Declaring a Custom CSS Property (@property)

The @property CSS rule is used to define a custom property (--rotation) that will animate our conic gradient.

@property --rotation {
 syntax: "<angle>";
 initial-value: 0turn;
 inherits: false;
}

• syntax: Specifies the type of values the property will accept (<angle> for angles).
• initial-value: Sets the default value (0turn).
• inherits: Determines if the property should inherit its value from its parent.

Step 3: Basic Styling for HTML and Body

Set the height of the page and ensure that the card is centered.

html,
body {
 height: 100%;
 font-size: 24px;
}

body {
 display: grid;
 place-content: center;
 background: #202020;
}

Here:

• display: grid; and place-content: center; center the content both vertically and horizontally.
• The background color is a dark gray (#202020) to make the glowing effect stand out.

Step 4: Designing the Glow Card

Card Base Styles

The .glow-card class contains the following styles:

.glow-card {
 aspect-ratio: 1;
 position: relative;
 color: white;
 padding: 2rem;
 border-radius: 1rem;
 overflow: hidden;
 display: grid;
 place-content: center;
 box-shadow: 0 0 40px rgba(255, 255, 255, 0.05);
}

• aspect-ratio: 1: Makes the card a perfect square.
• padding: Adds internal spacing for content.
• border-radius: Rounds the corners.
• box-shadow: Adds a subtle glow around the card.
• overflow: hidden: Ensures that child elements (like the glow effect) stay within the card boundaries.

Adding the Animated Glow Ring

The ::before pseudo-element creates the glowing ring:

.glow-card::before {
 position: absolute;
 inset: 0;
 content: "";
 z-index: -2;
 background-image: conic-gradient(
  from var(--rotation, 0turn),
  #007498,
  #00d493,
  #d91982,
  #f5a95b,
  #007498
 );
 -webkit-animation: 4s hue-rotation infinite linear;
 animation: 4s hue-rotation infinite linear;
}

• conic-gradient: Creates a circular gradient that rotates around the center.
• --rotation: Custom property that animates the gradient.
• animation: Adds continuous rotation to the gradient.

Adding a Glow Shadow Inside the Card

The ::after pseudo-element adds a blurred shadow inside the card:

.glow-card::after {
 position: absolute;
 width: 94%;
 height: 94%;
 top: 3%;
 left: 3%;
 border-radius: 0.7rem;
 content: "";
 z-index: -1;
 background: black;
 filter: blur(12px);
}

• filter: blur(12px): Creates a soft shadow effect.
• The width and height are slightly smaller than the card to leave room for the glowing border.

Step 5: Adding the Keyframes for Animation

Define the animation to rotate the gradient.

@-webkit-keyframes hue-rotation {
 from {
  --rotation: 0turn;
 }
 to {
  --rotation: 1turn;
 }
}

@keyframes hue-rotation {
 from {
  --rotation: 0turn;
 }
 to {
  --rotation: 1turn;
 }
}

These keyframes rotate the --rotation property from 0turn to 1turn, completing one full revolution of the gradient.

Complete Code

Here is the full code for the animated glowing ring card:

HTML

<div class="glow-card">
 content is here
</div>

CSS

@property --rotation {
 syntax: "<angle>";
 initial-value: 0turn;
 inherits: false;
}
html,
body {
 height: 100%;
 font-size: 24px;
}

body {
 display: grid;
 place-content: center;
 background: #202020;
}

.glow-card {
 aspect-ratio: 1;
 position: relative;
 color: white;
 padding: 2rem;
 border-radius: 1rem;
 overflow: hidden;
 display: grid;
 place-content: center;
 box-shadow: 0 0 40px rgba(255, 255, 255, 0.05);
}

.glow-card::before {
 position: absolute;
 inset: 0;
 content: "";
 z-index: -2;
 background-image: conic-gradient(
  from var(--rotation, 0turn),
  #007498,
  #00d493,
  #d91982,
  #f5a95b,
  #007498
 );
 -webkit-animation: 4s hue-rotation infinite linear;
 animation: 4s hue-rotation infinite linear;
}

.glow-card::after {
 position: absolute;
 width: 94%;
 height: 94%;
 top: 3%;
 left: 3%;
 border-radius: 0.7rem;
 content: "";
 z-index: -1;
 background: black;
 filter: blur(12px);
}

@-webkit-keyframes hue-rotation {
 from {
  --rotation: 0turn;
 }
 to {
  --rotation: 1turn;
 }
}

@keyframes hue-rotation {
 from {
  --rotation: 0turn;
 }
 to {
  --rotation: 1turn;
 }
}

Where to use?

Consider using this animated glowing ring card with HTML5 and CSS3 tutorial in the following scenarios: Web Development Courses: Incorporate this tutorial into web development courses to teach students about creating animated glowing ring cards using HTML and CSS. It provides a practical example to enhance their understanding of animation techniques. Web Design Blogs: Share this tutorial on web design blogs as a valuable resource for designers looking to add dynamic and eye-catching elements to their websites. It offers step-by-step instructions and code snippets to facilitate implementation. Online Coding Communities: Contribute this tutorial to online coding communities to inspire and assist fellow developers in creating visually appealing and interactive elements. The detailed explanation and complete code will be beneficial for community members seeking guidance. Educational Websites: Include this tutorial on educational websites dedicated to teaching HTML and CSS. It can serve as an engaging and educational resource for learners of all levels, helping them build their skills in web development. Freelance Web Development Projects: Utilize this tutorial as a reference for creating animated glowing ring cards when working on freelance web development projects. It will save time and effort by providing a ready-made solution that can be customized to suit specific client requirements. Remember to credit the original author, Pawan Mall, and provide a link to the CodePen demo for readers to explore the live example.

Conclusions

Online Coding Communities: Share this tutorial on coding platforms to inspire and assist fellow developers in creating visually appealing and interactive elements using HTML and CSS. The comprehensive explanation and complete code will be valuable for community members seeking guidance. Educational Websites: Publish this tutorial on educational platforms dedicated to teaching HTML and CSS. It can serve as an engaging and educational resource for learners of all levels, aiding them in developing their skills in web development. Freelance Web Development Projects: Utilize this tutorial as a reference for creating animated glowing ring cards during freelance web development projects. It will save time and effort by providing a pre-built solution that can be customized to meet specific client requirements. Remember to give credit to the original author, Pawan Mall, and include a link to the CodePen demo for readers to explore the live example.

Codepen Demo