Glowing border
date
May 23, 2025
slug
glowing-border
status
Published
tags
Tech
UI
Design
summary
type
Post
Glowing border is a kind of effect with gradient and animation (it's up to you). It is used mostly in web3 and some tech websites which mostly use dark backgrounds, like resend's banner below:
Kind of cool, right? In the rest of the post, I will show you how to build a simple glowing effect from scratch. There are three simple css attributes you need to learn in advance:
inset, conic-gradient(), and filter.How it works
Let's decompose the effect step by step. There are two boxes we can see, one with a linear gradient background and the other inside the bigger one, I drew a graph to show this structure:
The container provides a specific width and height and makes the outer and inner boxes fixed in the center. And the outer box is responsible for the blur and smoky background. The inner box provides the main part of glowing border and the space for the rest elements.
After talking, let me show you the code!
Code
Let's go straight to build the basic dom structure:
I already fill the
container's css with fixed width and height. You can use any width and height as you like. I use group attribute which is a tailwind css attribute, it allows the elements' styles based on the parents'.Main effect
outer box
There is nothing to show inside the container for now. Let's cook something inside the outer box. Remember the
conic-gradient() I mentioned above, here we will use it for the background of the outter box:Maybe some of the attributes you have not seen before, are some global variables I define in the css file:
The box is below:
The
inset is the shorthand of the top, right, bottom, and left properties. I added it because I want the smoky effect can not hit the real border. Adding filter and lowering the opacity can make it more smoky.inner box
The inner box seems inside the outer box, but I make them at the same level. We can add more
inset to do that.I used a combination background with
conic-gradient() for the border and linear-gradient() for the content background, but I just made it as a template. Hope you can add some cool colours to it. The portions of the gradient are not fixed, you can find the most suitable in your project. Here is the result:
animation
Let's make it cooler by adding animation. We can
conic-gradient() start in different degrees to make it like moving. We have already made it as a property call --border-angle. All we need to do next is add keyframe for it:By add
amiate-[${animation_name}_time_mod] to outer and inner boxes to make them move around the border simultaneously.final code
