Skip to content

Instantly share code, notes, and snippets.

@Ebrahim-Ramadan

Ebrahim-Ramadan/index.htm

Created June 19, 2024 16:22
Show Gist options
  • Save Ebrahim-Ramadan/367c90e9fb9ffd5f8e3266108dce1e66 to your computer and use it in GitHub Desktop.
Save Ebrahim-Ramadan/367c90e9fb9ffd5f8e3266108dce1e66 to your computer and use it in GitHub Desktop.
Download ZIP
blur bg animating
Raw
index.htm
<body>
<div style="filter: blur(1px);pointer-events:none;position:fixed;min-width:100%;margin-top:0;height:180%;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);z-index:0;opacity:0.3">
<div style="border-radius:99999px;position:absolute;top:50%;left:50%;width:100vw;min-width:1000px;height:100vh;transform:translate(-50%, -50%) scale(0.6);overflow:hidden">
<div class="ColorBlobs_SpinningGradient__DpGtx" style="position:absolute;top:50%;left:50%;width:100vw;height:100vw;transform:translate(-50%, -50%)"
animation: ColorBlobs_spin__CbrXa 8s linear infinite;
background: conic-gradient(from 0deg, #08f, #f60, #bbffa1, #4c00ff, #ab2666, #09f);
></div>
</div></div>
<style>
@keyframes ColorBlobs_spin__CbrXa{
0% {
transform: translate(-50%, -50%) rotate(0deg) scale(2);
}
100% {
transform: translate(-50%, -50%) rotate(1turn) scale(2);
}
}
</style>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment