Java-Scripts.net

Virtual Disco Ball

Fun CSS visual effects. This script creates a spinning disco ball using a single HTML element and advanced CSS background patterns.

Copy the Script

<style>
.disco-ball {
    width: 100px; height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #999 20%, #333 100%);
    position: relative;
    animation: spin 2s linear infinite;
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

<div class="disco-ball"></div>

Frequently Asked Questions

No. This effect is created purely using CSS gradients and animations. The 'ball' is a rounded div with a repeating gradient pattern that rotates.

Yes. You can modify the `background` CSS property to change the reflection colors from silver/white to gold or multi-colored.

CSS animations are generally efficient, but complex lighting effects (like multiple box-shadows) can be CPU intensive on very old devices.