WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS Stage with Light Strings and Stairs
600
alejandrokundrah
Open In Editor
Publish Your Code
Recommended
12 August 2025
HTML Login Form with Matrix Background
2 September 2025
HTML TV Screen with YouTube Embed and Glitch Effect
19 October 2025
Three.js Particle Shape Morphing with Controls
HTML
Copy
#1
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Knewave&display=swap'); *, *::before, *::after { padding: 0; margin: 0; box-sizing: border-box; } :root { --swingDuration: 32s -28s; } body { font-family: "Knewave", system-ui; background-color: #000; color: #fff; min-height: 100vh; display: grid; place-items: center; perspective: 50em; overflow: hidden; * { transform-style: preserve-3d; } } .stage { position: relative; transform: rotateX(90deg) translateZ(-15em); animation: stageRotate var(--swingDuration) infinite linear; * { position: absolute; } } @keyframes stageRotate { to { rotate: y -360deg; } } .floor { inset: -100em; background: radial-gradient(closest-side, transparent, black), radial-gradient(#ff0, transparent 0.1em) 0 0 / 7em 4.5em, radial-gradient(#ff0, transparent 0.1em) 0 0 / 7.5em 5em, radial-gradient(#ff0, transparent 0.1em) 0 0 / 4em 7.5em, radial-gradient(#ff0, transparent 0.1em) 0 0 / 4.5em 5em, radial-gradient(#ff0, transparent 0.1em) 0 0 / 5em 7.5em, radial-gradient(#ff0, transparent 0.1em) 0 0 / 5.5em 4em, black; } .innerStage { inset: -5.75em; background-color: #777; border-radius: 50%; border: 0.25em solid #444; transform: translateZ(9em); } .innerRing { inset: -6em; border-radius: 50%; box-shadow: 0 0 0 0.25em white inset, 0 0 2em white inset; transform: translateZ(28em) rotateX(-30deg); --stringHeight: 36em; --w: 6em; --h: 6em; --rx: -60deg; --ro: 6deg; } .outerRing { inset: -8em -7em; border-radius: 50%; box-shadow: 0 0 0 0.25em white inset, 0 0 2em white inset; transform: translateZ(16em) rotateX(-40deg); --stringHeight: 28em; --w: 7em; --h: 8em; --rx: -50deg; --ro: 4deg; } .stairsRing { inset: -16em -13em; transform: translateZ(8em) rotateX(-25deg) rotateZ(180deg); --stringHeight: 15em; --w: 13em; --h: 16em; --rx: -115deg; --ro: 2deg; &::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0.25em white inset, 0 0 1em white inset; clip-path: polygon(0 0, 50% 0, 10% 50%, 50% 100%, 0 100%); } } .backBar { inset: -4em -0.1em; background-color: #fff; transform: translateZ(14.7em) translateY(-10.5em); --stringHeight: 15em; --rx: -90deg; .lightstring { left: 0; top: calc(var(--i) * 0.5em); } &::after { content: ''; position: absolute; inset: 0; background-color: #fff; rotate: y 90deg; border-radius: 1em; } } .lightstring { left: calc(50% - sin(var(--i) * var(--ro)) * var(--w) - 0.25em); top: calc(50% - cos(var(--i) * var(--ro)) * var(--h)); width: 0.5em; height: var(--stringHeight); background-image: radial-gradient(circle at 50% 50%, #fff7, transparent 0.1em); background-size: 100% 0.25em; transform-origin: top; animation: lightstringRotate var(--swingDuration) infinite linear; &.short { height: 2em; } &::after { content: ''; position: absolute; left: -2em; top: calc(abs(sin(var(--i) * 10deg)) * 100% - 2.25em); width: 4.5em; height: 4.5em; background-image: radial-gradient(closest-side, var(--_c, #dff), 1%, transparent); animation: sparkle 4s calc(abs(sin(var(--i) * 20.5deg)) * -4s) infinite step-end; } &:nth-child(odd) { --_c: #ffd; } } @keyframes lightstringRotate { from { transform: rotateX(var(--rx)) rotateY(0deg); } to { transform: rotateX(var(--rx)) rotateY(360deg); } } @keyframes sparkle { 0%, 10%, 100% { opacity: 0; } 5% { opacity: 1; } } .stair { inset: -3em -1em; background-color: #444; transform-style: flat; border: 0.125em solid #777; transform: rotate(calc(var(--i) * -10deg - 50deg)) translateY(10em) translateZ(calc((var(--i) + 1) * 0.75em)); &:last-child { inset: -3em -2em; transform: rotate(calc(var(--i) * -10deg - 55deg)) translateY(10em) translateZ(calc((var(--i) + 1) * 0.75em)); } } .number { inset: -2em; display: grid; place-items: center; transform: rotateX(-90deg) translateY(-2.5em); font-size: 6em; color: hsl(200 100% 50%); }
JS
Copy
<div class="stage"> <div class="floor"></div> <div class="innerStage"></div> <div class="innerRing"> <div class="lightstring" style="--i: 0;"></div> <div class="lightstring" style="--i: 1;"></div> <div class="lightstring" style="--i: 2;"></div> <div class="lightstring" style="--i: 3;"></div> <div class="lightstring" style="--i: 4;"></div> <div class="lightstring" style="--i: 5;"></div> <div class="lightstring" style="--i: 6;"></div> <div class="lightstring" style="--i: 7;"></div> <div class="lightstring" style="--i: 8;"></div> <div class="lightstring" style="--i: 9;"></div> <div class="lightstring" style="--i: 10;"></div> <div class="lightstring" style="--i: 11;"></div> <div class="lightstring" style="--i: 12;"></div> <div class="lightstring" style="--i: 13;"></div> <div class="lightstring" style="--i: 14;"></div> <div class="lightstring" style="--i: 15;"></div> <div class="lightstring" style="--i: 16;"></div> <div class="lightstring" style="--i: 17;"></div> <div class="lightstring" style="--i: 18;"></div> <div class="lightstring" style="--i: 19;"></div> <div class="lightstring" style="--i: 20;"></div> <div class="lightstring" style="--i: 21;"></div> <div class="lightstring" style="--i: 22;"></div> <div class="lightstring short" style="--i: 23;"></div> <div class="lightstring short" style="--i: 24;"></div> <div class="lightstring short" style="--i: 25;"></div> <div class="lightstring short" style="--i: 26;"></div> <div class="lightstring short" style="--i: 27;"></div> <div class="lightstring short" style="--i: 28;"></div> <div class="lightstring short" style="--i: 29;"></div> <div class="lightstring short" style="--i: 30;"></div> <div class="lightstring short" style="--i: 31;"></div> <div class="lightstring short" style="--i: 32;"></div> <div class="lightstring short" style="--i: 33;"></div> <div class="lightstring short" style="--i: 34;"></div> <div class="lightstring short" style="--i: 35;"></div> <div class="lightstring short" style="--i: 36;"></div> <div class="lightstring short" style="--i: 37;"></div> <div class="lightstring" style="--i: 38;"></div> <div class="lightstring" style="--i: 39;"></div> <div class="lightstring" style="--i: 40;"></div> <div class="lightstring" style="--i: 41;"></div> <div class="lightstring" style="--i: 42;"></div> <div class="lightstring" style="--i: 43;"></div> <div class="lightstring" style="--i: 44;"></div> <div class="lightstring" style="--i: 45;"></div> <div class="lightstring" style="--i: 46;"></div> <div class="lightstring" style="--i: 47;"></div> <div class="lightstring" style="--i: 48;"></div> <div class="lightstring" style="--i: 49;"></div> <div class="lightstring" style="--i: 50;"></div> <div class="lightstring" style="--i: 51;"></div> <div class="lightstring" style="--i: 52;"></div> <div class="lightstring" style="--i: 53;"></div> <div class="lightstring" style="--i: 54;"></div> <div class="lightstring" style="--i: 55;"></div> <div class="lightstring" style="--i: 56;"></div> <div class="lightstring" style="--i: 57;"></div> <div class="lightstring" style="--i: 58;"></div> <div class="lightstring" style="--i: 59;"></div> </div> <div class="outerRing"> <div class="lightstring" style="--i: 0;"></div> <div class="lightstring" style="--i: 1;"></div> <div class="lightstring" style="--i: 2;"></div> <div class="lightstring" style="--i: 3;"></div> <div class="lightstring" style="--i: 4;"></div> <div class="lightstring" style="--i: 5;"></div> <div class="lightstring" style="--i: 6;"></div> <div class="lightstring" style="--i: 7;"></div> <div class="lightstring" style="--i: 8;"></div> <div class="lightstring" style="--i: 9;"></div> <div class="lightstring" style="--i: 10;"></div> <div class="lightstring" style="--i: 11;"></div> <div class="lightstring" style="--i: 12;"></div> <div class="lightstring" style="--i: 13;"></div> <div class="lightstring" style="--i: 14;"></div> <div class="lightstring" style="--i: 15;"></div> <div class="lightstring" style="--i: 16;"></div> <div class="lightstring" style="--i: 17;"></div> <div class="lightstring" style="--i: 18;"></div> <div class="lightstring" style="--i: 19;"></div> <div class="lightstring" style="--i: 20;"></div> <div class="lightstring" style="--i: 21;"></div> <div class="lightstring" style="--i: 22;"></div> <div class="lightstring" style="--i: 23;"></div> <div class="lightstring" style="--i: 24;"></div> <div class="lightstring" style="--i: 25;"></div> <div class="lightstring" style="--i: 26;"></div> <div class="lightstring" style="--i: 27;"></div> <div class="lightstring" style="--i: 28;"></div> <div class="lightstring" style="--i: 29;"></div> <div class="lightstring" style="--i: 30;"></div> <div class="lightstring" style="--i: 31;"></div> <div class="lightstring" style="--i: 32;"></div> <div class="lightstring" style="--i: 33;"></div> <div class="lightstring" style="--i: 34;"></div> <div class="lightstring" style="--i: 35;"></div> <div class="lightstring" style="--i: 36;"></div> <div class="lightstring" style="--i: 37;"></div> <div class="lightstring" style="--i: 38;"></div> <div class="lightstring" style="--i: 39;"></div> <div class="lightstring" style="--i: 40;"></div> <div class="lightstring" style="--i: 41;"></div> <div class="lightstring" style="--i: 42;"></div> <div class="lightstring" style="--i: 43;"></div> <div class="lightstring" style="--i: 44;"></div> <div class="lightstring" style="--i: 45;"></div> <div class="lightstring" style="--i: 46;"></div> <div class="lightstring" style="--i: 47;"></div> <div class="lightstring" style="--i: 48;"></div> <div class="lightstring" style="--i: 49;"></div> <div class="lightstring" style="--i: 50;"></div> <div class="lightstring" style="--i: 51;"></div> <div class="lightstring" style="--i: 52;"></div> <div class="lightstring" style="--i: 53;"></div> <div class="lightstring" style="--i: 54;"></div> <div class="lightstring" style="--i: 55;"></div> <div class="lightstring" style="--i: 56;"></div> <div class="lightstring" style="--i: 57;"></div> <div class="lightstring" style="--i: 58;"></div> <div class="lightstring" style="--i: 59;"></div> <div class="lightstring" style="--i: 60;"></div> <div class="lightstring" style="--i: 61;"></div> <div class="lightstring" style="--i: 62;"></div> <div class="lightstring" style="--i: 63;"></div> <div class="lightstring" style="--i: 64;"></div> <div class="lightstring" style="--i: 65;"></div> <div class="lightstring" style="--i: 66;"></div> <div class="lightstring" style="--i: 67;"></div> <div class="lightstring" style="--i: 68;"></div> <div class="lightstring" style="--i: 69;"></div> <div class="lightstring" style="--i: 70;"></div> <div class="lightstring" style="--i: 71;"></div> <div class="lightstring" style="--i: 72;"></div> <div class="lightstring" style="--i: 73;"></div> <div class="lightstring" style="--i: 74;"></div> <div class="lightstring" style="--i: 75;"></div> <div class="lightstring" style="--i: 76;"></div> <div class="lightstring" style="--i: 77;"></div> <div class="lightstring" style="--i: 78;"></div> <div class="lightstring" style="--i: 79;"></div> <div class="lightstring" style="--i: 80;"></div> <div class="lightstring" style="--i: 81;"></div> <div class="lightstring" style="--i: 82;"></div> <div class="lightstring" style="--i: 83;"></div> <div class="lightstring" style="--i: 84;"></div> <div class="lightstring" style="--i: 85;"></div> <div class="lightstring" style="--i: 86;"></div> <div class="lightstring" style="--i: 87;"></div> <div class="lightstring" style="--i: 88;"></div> <div class="lightstring" style="--i: 89;"></div> <div class="lightstring" style="--i: 90;"></div> </div> <div class="stairsRing"> <div class="lightstring" style="--i: 0;"></div> <div class="lightstring" style="--i: 1;"></div> <div class="lightstring" style="--i: 2;"></div> <div class="lightstring" style="--i: 3;"></div> <div class="lightstring" style="--i: 4;"></div> <div class="lightstring" style="--i: 5;"></div> <div class="lightstring" style="--i: 6;"></div> <div class="lightstring" style="--i: 7;"></div> <div class="lightstring" style="--i: 8;"></div> <div class="lightstring" style="--i: 9;"></div> <div class="lightstring" style="--i: 10;"></div> <div class="lightstring" style="--i: 11;"></div> <div class="lightstring" style="--i: 12;"></div> <div class="lightstring" style="--i: 13;"></div> <div class="lightstring" style="--i: 14;"></div> <div class="lightstring" style="--i: 15;"></div> <div class="lightstring" style="--i: 16;"></div> <div class="lightstring" style="--i: 17;"></div> <div class="lightstring" style="--i: 18;"></div> <div class="lightstring" style="--i: 19;"></div> <div class="lightstring" style="--i: 20;"></div> <div class="lightstring" style="--i: 21;"></div> <div class="lightstring" style="--i: 22;"></div> <div class="lightstring" style="--i: 23;"></div> <div class="lightstring" style="--i: 24;"></div> <div class="lightstring" style="--i: 25;"></div> <div class="lightstring" style="--i: 26;"></div> <div class="lightstring" style="--i: 27;"></div> <div class="lightstring" style="--i: 28;"></div> <div class="lightstring" style="--i: 29;"></div> <div class="lightstring" style="--i: 30;"></div> <div class="lightstring" style="--i: 31;"></div> <div class="lightstring" style="--i: 32;"></div> <div class="lightstring" style="--i: 33;"></div> <div class="lightstring" style="--i: 34;"></div> <div class="lightstring" style="--i: 35;"></div> <div class="lightstring" style="--i: 36;"></div> <div class="lightstring" style="--i: 37;"></div> <div class="lightstring" style="--i: 38;"></div> <div class="lightstring" style="--i: 39;"></div> <div class="lightstring" style="--i: 40;"></div> <div class="lightstring" style="--i: 41;"></div> <div class="lightstring" style="--i: 42;"></div> <div class="lightstring" style="--i: 43;"></div> <div class="lightstring" style="--i: 44;"></div> <div class="lightstring" style="--i: 45;"></div> <div class="lightstring" style="--i: 46;"></div> <div class="lightstring" style="--i: 47;"></div> <div class="lightstring" style="--i: 48;"></div> <div class="lightstring" style="--i: 49;"></div> <div class="lightstring" style="--i: 50;"></div> <div class="lightstring" style="--i: 51;"></div> <div class="lightstring" style="--i: 52;"></div> <div class="lightstring" style="--i: 53;"></div> <div class="lightstring" style="--i: 54;"></div> <div class="lightstring" style="--i: 55;"></div> <div class="lightstring" style="--i: 56;"></div> <div class="lightstring" style="--i: 57;"></div> <div class="lightstring" style="--i: 58;"></div> <div class="lightstring" style="--i: 59;"></div> <div class="lightstring" style="--i: 60;"></div> <div class="lightstring" style="--i: 61;"></div> <div class="lightstring" style="--i: 62;"></div> <div class="lightstring" style="--i: 63;"></div> <div class="lightstring" style="--i: 64;"></div> <div class="lightstring" style="--i: 65;"></div> <div class="lightstring" style="--i: 66;"></div> <div class="lightstring" style="--i: 67;"></div> <div class="lightstring" style="--i: 68;"></div> <div class="lightstring" style="--i: 69;"></div> <div class="lightstring" style="--i: 70;"></div> <div class="lightstring" style="--i: 71;"></div> <div class="lightstring" style="--i: 72;"></div> <div class="lightstring" style="--i: 73;"></div> <div class="lightstring" style="--i: 74;"></div> <div class="lightstring" style="--i: 75;"></div> <div class="lightstring" style="--i: 76;"></div> <div class="lightstring" style="--i: 77;"></div> <div class="lightstring" style="--i: 78;"></div> <div class="lightstring" style="--i: 79;"></div> <div class="lightstring" style="--i: 80;"></div> <div class="lightstring" style="--i: 81;"></div> <div class="lightstring" style="--i: 82;"></div> <div class="lightstring" style="--i: 83;"></div> <div class="lightstring" style="--i: 84;"></div> <div class="lightstring" style="--i: 85;"></div> <div class="lightstring" style="--i: 86;"></div> <div class="lightstring" style="--i: 87;"></div> <div class="lightstring" style="--i: 88;"></div> <div class="lightstring" style="--i: 89;"></div> <div class="lightstring" style="--i: 90;"></div> </div> <div class="backBar"> <div class="lightstring" style="--i: 1;"></div> <div class="lightstring" style="--i: 2;"></div> <div class="lightstring" style="--i: 3;"></div> <div class="lightstring" style="--i: 4;"></div> <div class="lightstring" style="--i: 5;"></div> <div class="lightstring" style="--i: 6;"></div> <div class="lightstring" style="--i: 7;"></div> <div class="lightstring" style="--i: 8;"></div> <div class="lightstring" style="--i: 9;"></div> <div class="lightstring" style="--i: 10;"></div> <div class="lightstring" style="--i: 11;"></div> <div class="lightstring" style="--i: 12;"></div> <div class="lightstring" style="--i: 13;"></div> <div class="lightstring" style="--i: 14;"></div> <div class="lightstring" style="--i: 15;"></div> </div> <div class="stairs"> <div class="stair" style="--i: 0;"></div> <div class="stair" style="--i: 1;"></div> <div class="stair" style="--i: 2;"></div> <div class="stair" style="--i: 3;"></div> <div class="stair" style="--i: 4;"></div> <div class="stair" style="--i: 5;"></div> <div class="stair" style="--i: 6;"></div> <div class="stair" style="--i: 7;"></div> <div class="stair" style="--i: 8;"></div> <div class="stair" style="--i: 9;"></div> <div class="stair" style="--i: 10;"></div> <div class="stair" style="--i: 11;"></div> </div> <div class="number">#1</div> </div>