Java-Scripts.net

Rainbow Background Cycler

Create an ever-changing atmosphere. This script uses CSS Keyframes to smoothly transition the background color through a defined spectrum.

Rainbow Effect

Watch the background color shift smoothly.

Copy the Script

<style>
@keyframes rainbow {
    0% { background-color: #ff0000; }
    20% { background-color: #ff9900; }
    40% { background-color: #ffff00; }
    60% { background-color: #33cc33; }
    80% { background-color: #0066cc; }
    100% { background-color: #ff0000; }
}

.rainbow-bg {
    animation: rainbow 10s infinite alternate;
}
</style>

<body class="rainbow-bg">
   <h1>Welcome</h1>
</body>

Frequently Asked Questions

It can be if the colors change too fast or are too bright. Using pastel colors and a slow transition duration (e.g., 10 seconds) makes it more soothing and readable.

Yes. You can apply the same animation class to `color` instead of `background-color` to make text cycle through colors (often used for 'gaming' style headers).

Yes. You can use JavaScript to remove the CSS class or set `animation-play-state: paused` when a user clicks a button.