Learn with us how to create a Border Gradient in CSS!
If you found us on TikTok on the following post, check out this article and copy-paste the full code!
Happy coding! 😻
@creative.tim You can never go wrong with a spark of color, can you? Try this in CSS. Find the full copy-paste code in bio! #coding #css #programming ♬ sunet original - Creative Tim
1. HTML Code
<div class="box">
</div>
<!-- Inspired by the mega buttons on https://turbo.build/ -->
2. CSS Code
html {
height: 100%;
background: #223;
display: grid;
place-items: center;
}
.box {
--border-size: 3px;
--border-angle: 0turn;
width: 60vmin;
height: 50vmin;
background-image: conic-gradient(
from var(--border-angle),
#213,
#112 50%,
#213
),
conic-gradient(
from var(--border-angle),
transparent 20%,
#2d00f7,
#c200fb,
#ec7d10,
#30f2f2,
#7cb518
);
background-size: calc(100% - (var(--border-size) * 2))
calc(100% - (var(--border-size) * 2)),
cover;
background-position: center center;
background-repeat: no-repeat;
animation: bg-spin 3s linear infinite;
@keyframes bg-spin {
to {
--border-angle: 1turn;
}
}
&:hover {
animation-play-state: paused;
}
}
@property --border-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}
I hope you did find this tutorial useful!
For more web development or UI/UX design tutorials, follow us on:
Other useful resources:
