console
<div class="gradient-border">
<span class="text"> Button </span>
<div class="red-glow glow"></div>
<div class="cyan-glow glow"></div>
<div class="purple-glow glow"></div>
<div class="white-glow glow"></div>
</div>
body{
background:#000;
}
.text {
display: inline-block;
color: rgba(255, 255, 255, 0.8);
width: 100%;
height: 100%;
align-content: center;
text-align: center;
font-size: 32px;
}
.gradient-border{
position: absolute;
left:calc(50% - 160px);
top:calc(50% - 50px);
border-radius: 100px;
width:320px;
height:100px;
--border-width: 4px;
--radius: 100px;
border-radius: var(--radius);
border: var(--border-width) solid transparent;
}
.gradient-border::before {
content: " ";
position: absolute;
inset: calc(var(--border-width) * -1);
z-index: -1;
border: inherit;
border-radius: inherit;
background-image: conic-gradient(from var(--angle) at 50% 50%, #EEEBFF 0deg, #A193F6 90deg, #3DFCFF 180deg, #FF7DD6 270deg, #EEEBFF 360deg);
background-origin: border-box;
-webkit-mask: linear-gradient(black, black),
linear-gradient(black, black);
mask: linear-gradient(black, black),
linear-gradient(black, black);
-webkit-mask-clip: content-box, border-box;
mask-clip: content-box, border-box;
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: spin 3s linear infinite running;
}
.gradient-border .glow{
position: absolute;
inset: calc(var(--border-width) * -1);
border-radius: inherit;
}
.gradient-border .glow::after{
content:'';
position: absolute;
inset: calc(var(--border-width) * -1);
z-index: -1;
border: calc(var(--border-width) * 2) solid transparent;
border-radius: inherit;
background-image: conic-gradient(from var(--angle) at 50% 50%, #EEEBFF 0deg, transparent 90deg, transparent 180deg, transparent 270deg, #EEEBFF 360deg);
background-origin: border-box;
-webkit-mask: linear-gradient(black, black),
linear-gradient(black, black);
mask: linear-gradient(black, black),
linear-gradient(black, black);
-webkit-mask-clip: content-box, border-box;
mask-clip: content-box, border-box;
-webkit-mask-composite: xor;
mask-composite: exclude;
animation: spin 4s linear infinite running;
}
.white-glow{
filter:blur(20px);
}
.gradient-border .purple-glow::after {
background-image: conic-gradient(from var(--angle) at 50% 50%, transparent 0deg, #A193F6 90deg, transparent 180deg);
border: calc(var(--border-width) * 1) solid transparent;
}
.purple-glow{
filter:blur(7px);
}
.gradient-border .red-glow::after {
background-image: conic-gradient(from var(--angle) at 50% 50%, transparent 180deg, #FF7DD6 270deg, transparent 360deg);
border: calc(var(--border-width) * 1) solid transparent;
}
.red-glow{
filter:blur(8px);
}
.gradient-border .cyan-glow::after {
background-image: conic-gradient(from var(--angle) at 50% 50%, transparent 90deg, #3DFCFF 180deg, transparent 270deg);
border: calc(var(--border-width) * 2) solid transparent;
}
.cyan-glow{
filter:blur(15px);
}
@property --angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}
@keyframes spin {
to {
--angle: 1turn;
}
}