Skip to content

Instantly share code, notes, and snippets.

@Skaldebane

Skaldebane/index.css

Created October 6, 2023 01:50
Show Gist options
  • Save Skaldebane/b2574b77840b246b25936441b736c18c to your computer and use it in GitHub Desktop.
Save Skaldebane/b2574b77840b246b25936441b736c18c to your computer and use it in GitHub Desktop.
Download ZIP
CSS - Animated Border Colors with Conic Gradients [Works on Firefox™]
Raw
index.css
html { font-family: sans-serif }
.top {
width: 196px;
height: 46px;
margin: 2px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
clip-path: inset(0 0 0 0 round 19px);
background-color: #FFFFFF
}
.container {
position: relative;
width: 200px;
height: 50px;
clip-path: inset(0 0 0 0 round 20px);
overflow: hidden;
}
.bottom {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
animation: rotate 5s linear infinite;
background: conic-gradient(
from 0deg,
rgba(255, 0, 0, 0.7),
rgba(0, 0, 255, 0.7),
rgba(0, 255, 0, 0.7),
rgba(255, 0, 0, 0.7)
);
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css"/>
</head>
<body>
<div class="container">
<div class="bottom"></div>
<div class="top"></div>
</div>
<h2><i>Works on Firefox™</i></h2>
<h3>Made with 💙️ by <b><a href="https://skaldebane.dev" target="_blank">Skaldebane</a></b> in 🇲🇦️</h3>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment