Rainbow
A pure CSS rainbow spinner that uses layered inset box-shadows to create vivid concentric colour bands on a spinning semicircle. No images, no SVG — just CSS.
Generated using Grepped's AI UI component generator — created from scratch, not pulled from a library.
spinnerrainbowloaderbox-shadowcolorful
Live Preview — customize or regenerate this in the workspace
Loading preview…
Design Intent
A semicircular rainbow spinner with vivid concentric colour bands using pure CSS box-shadows.
CSS
css
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
@keyframes spin {
to { transform: rotate(360deg); }
}
.rainbow {
border-radius: 100%;
clip-path: inset(0 0 50% 0);
display: flex;
align-items: center;
justify-content: center;
height: 100px;
position: relative;
width: 100px;
}
.rainbow:after {
content: '';
height: 10px;
width: 10px;
position: absolute;
border-radius: 100%;
box-shadow:
-40px -2px 0 1px #ffffff, -35px -6px 0 1px #ffffff,
-30px -2px 0 1px #ffffff, -30px -8px 0 1px #ffffff,
-25px -2px 0 1px #ffffff, -25px -8px 0 1px #ffffff,
-20px -6px 0 1px #ffffff, -15px -2px 0 1px #ffffff,
40px -2px 0 1px #ffffff, 35px -6px 0 1px #ffffff,
30px -2px 0 1px #ffffff, 30px -8px 0 1px #ffffff,
25px -2px 0 1px #ffffff, 25px -8px 0 1px #ffffff,
20px -6px 0 1px #ffffff, 15px -2px 0 1px #ffffff;
}
.rainbow:before {
content: '';
height: 80px;
width: 80px;
animation: spin 1.5s linear infinite;
border-radius: 100%;
box-shadow:
0 0 0 4px #f22613 inset,
0 0 0 8px #f89406 inset,
0 0 0 12px #f9bf3b inset,
0 0 0 16px #2ecc71 inset,
0 0 0 20px #19b5fe inset,
0 0 0 24px #663399 inset,
0 0 0 28px #bf55ec inset;
clip-path: inset(0 0 50% 0);
position: absolute;
}HTML
html
<div class="rainbow"></div>Full Source
html
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0f0f0f; }
@keyframes spin {
to { transform: rotate(360deg); }
}
.rainbow {
border-radius: 100%;
clip-path: inset(0 0 50% 0);
display: flex;
align-items: center;
justify-content: center;
height: 100px;
position: relative;
width: 100px;
}
.rainbow:after {
content: '';
height: 10px;
width: 10px;
position: absolute;
border-radius: 100%;
box-shadow:
-40px -2px 0 1px #ffffff, -35px -6px 0 1px #ffffff,
-30px -2px 0 1px #ffffff, -30px -8px 0 1px #ffffff,
-25px -2px 0 1px #ffffff, -25px -8px 0 1px #ffffff,
-20px -6px 0 1px #ffffff, -15px -2px 0 1px #ffffff,
40px -2px 0 1px #ffffff, 35px -6px 0 1px #ffffff,
30px -2px 0 1px #ffffff, 30px -8px 0 1px #ffffff,
25px -2px 0 1px #ffffff, 25px -8px 0 1px #ffffff,
20px -6px 0 1px #ffffff, 15px -2px 0 1px #ffffff;
}
.rainbow:before {
content: '';
height: 80px;
width: 80px;
animation: spin 1.5s linear infinite;
border-radius: 100%;
box-shadow:
0 0 0 4px #f22613 inset,
0 0 0 8px #f89406 inset,
0 0 0 12px #f9bf3b inset,
0 0 0 16px #2ecc71 inset,
0 0 0 20px #19b5fe inset,
0 0 0 24px #663399 inset,
0 0 0 28px #bf55ec inset;
clip-path: inset(0 0 50% 0);
position: absolute;
}
</style>
</head>
<body>
<div class="rainbow"></div>
</body>
</html>