CSS Stylish Box with Animated Gradient Border

CSS Stylish Box with Animated Gradient Border
Code Snippet:Gorgeous animated gradient borders using only CSS
Author: Jason Lengstorf
Published: January 28, 2024
Last Updated: February 3, 2024
Downloads: 59
License: MIT
Edit Code online: CodeHim
Read More

This CSS code snippet helps you to create a stylish box with an animated gradient border that comes to life when you hover over the element. The animation is achieved by cleverly manipulating custom properties and keyframes. The article element showcases a stunning border made up of two gradients, styled with OKLCH to enhance visual appeal.

Furthermore, this code is perfect for adding a touch of elegance and interactivity to your web projects without relying on JavaScript.

How to Create CSS Stylish Box With Animated Gradient Border

1. First of all, create your HTML with a main container and an article element. Inside the article, add a heading and a paragraph to showcase the content of your stylish box.

<main>
  <article>
    <h1>Hey look, this is only CSS!</h1>
    <p>
      I didn’t know you could do gradient borders like this. Hover over this element to see the gradient animate!
    </p>
  </article>
</main>

2. Finally, let’s bring the magic to life with the CSS styles. Copy and paste the following CSS code into your project. This code includes custom properties, keyframes, and gradient styling to achieve the desired animated effect.

@charset "UTF-8";
/**
 * `@property` is required for the animation to work.
 * Without it, the angle values won’t interpolate properly.
 *
 * @see https://dev.to/afif/we-can-finally-animate-css-gradient-kdk
 */
@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}
/**
 * To animate the gradient, we set the custom property to 1 full
 * rotation. The animation starts at the default value of `0deg`.
 */
@keyframes spin {
  to {
    --bg-angle: 360deg;
  }
}
article {
  /* add the animation, but pause it by default */
  animation: spin 2.5s infinite linear paused;
  /**
   * Using `background-origin` we can create a “border” using two gradients. And to
   * make the gradients better-looking, we use OKLCH.
   *
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
   * @see https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
   */
  background: linear-gradient(to bottom, oklch(0.1 0.2 240/0.95), oklch(0.1 0.2 240/0.95)) padding-box, conic-gradient(from var(--bg-angle) in oklch longer hue, oklch(0.85 0.37 0) 0 0) border-box;
  /* extends to outer border edges */
  /* a clear border lets the background gradient shine through */
  border: 6px solid transparent;
  /* unpause the animation on hover */
}
article:hover {
  animation-play-state: running;
}

/******************************************************************
 * Other styles to make the demo look nice
 ******************************************************************/
* {
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 18px;
  line-height: 1.45;
}

body {
  margin: 0;
  background: radial-gradient(circle, oklch(0.15 0.2 330/0), oklch(0.15 0.2 330/1)), linear-gradient(344deg in oklch, oklch(0.3 0.37 310), oklch(0.35 0.37 330), oklch(0.3 0.37 310)) !important;
  display: grid;
  height: 100svh;
  place-items: center;
}

article {
  border-radius: 1rem;
  box-shadow: 0.125rem 0.25rem 0.25rem 0.5rem oklch(0.1 0.37 315/0.25);
  color: white;
  padding: 1rem;
  width: min(400px, 90vw);
}
article h1 {
  line-height: 1.1;
  margin: 0;
}
article p {
  margin: 0.75rem 0 0;
}

The background property combines two gradients, creating a visually appealing border effect. The border property is set to transparent, allowing the background gradient to shine through.

On the other hand, the animation-play-state: running; property ensures the rotation effect starts when the user hovers over the article.

That’s all! hopefully, you have successfully created a box with an animated gradient border on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...