Published on

Bring Your Website to Life: A Deep Dive into Creating a Rainy Background Effect with CSS

Authors

'Bring Your Website to Life: A Deep Dive into Creating a Rainy Background Effect with CSS'

Learn how to craft a stunning, atmospheric rainy background effect using pure CSS. This comprehensive guide covers everything from simple animations to advanced, dynamic techniques with Sass.

Table of Contents

There's something magical about a rainy day. It can be cozy, dramatic, or melancholic. Capturing that atmosphere on a website can transform a static page into an immersive experience. Whether you're building a portfolio for a moody photographer, a promotional site for a noir film, or just want to add a unique touch to your project, a CSS rain effect is a powerful tool in your design arsenal.

In this deep dive, we'll explore several methods for creating a convincing rainy background effect, from the elegantly simple to the impressively complex. We'll start with the basics of setting the scene and move all the way to generating dynamic, layered rain with Sass and adding finishing touches like lightning. So grab a cup of coffee, get comfortable, and let's make it rain!

The Foundation: Setting a Stormy Scene

Before a single drop falls, we need a sky to fall from. A convincing rain effect starts with a dark, atmospheric background. A simple solid color can work, but a subtle gradient adds depth and realism, mimicking a stormy, overcast sky.

First, let's set up our basic HTML. We don't need anything complicated; a container element will serve as our canvas.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Rain Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="rain-container">
        <!-- Raindrops will be generated here -->
    </div>
    <div class="content">
        <h1>It's a Rainy Day</h1>
        <p>Content goes here to show the effect is in the background.</p>
    </div>
</body>
</html>

Now for the CSS. We'll style the body and our .rain-container to create that moody backdrop. We'll use a linear-gradient that transitions from a dark blue-grey to a slightly lighter one, suggesting a heavy, cloud-filled sky.

body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', sans-serif;
    overflow: hidden; /* Hide anything that goes outside the viewport */
}

.rain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #2c3e50, #4ca1af);
    z-index: -1; /* Place it behind all other content */
}

.content {
    color: white;
    text-align: center;
    padding-top: 20vh;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

With this foundation, we have a dark, gradient background that's ready for a downpour. The z-index: -1 is crucial; it ensures our rain effect stays in the background, behind our actual page content.

Method 1: The Simple Downpour with an Animated Background Image

The quickest way to get a rain effect is by using a repeating, semi-transparent background image of rain streaks. This method is incredibly performant and easy to implement.

The Concept: We'll use a small, tileable image of rain streaks and animate its background-position to create the illusion of falling rain.

First, you'll need an image. You can create one in Photoshop or find a seamless texture online. It should be a PNG with a transparent background, featuring a few diagonal white or light-grey lines to represent rain.

Let's assume we have an image named rain-streaks.png. Here's how we'd apply it:

/* Add this to your existing CSS */
.rain-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('rain-streaks.png');
    background-repeat: repeat;
    animation: falling-rain-simple 0.5s linear infinite;
}

@keyframes falling-rain-simple {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 0 100%;
    }
}

How it Works:

  1. We use the ::after pseudo-element on our .rain-container to hold the rain texture. This is good practice as it keeps our primary element clean.
  2. background-image points to our rain texture.
  3. background-repeat: repeat; tiles the image across the entire element.
  4. The animation property links to our @keyframes rule named falling-rain-simple.
  5. The keyframes animate the background-position vertically from 0 to 100%, which seamlessly loops the texture downwards, creating a continuous falling effect.

Pros:

  • Very easy to set up.
  • Excellent performance, as the browser only has to animate one property on a single pseudo-element.

Cons:

  • Can look repetitive and artificial.
  • Lacks depth and randomness.

This method is perfect for subtle background effects or when performance is the absolute top priority.

Method 2: The Main Event - Pure CSS Raindrops

For a more dynamic and realistic effect, we can create the raindrops themselves using CSS. This approach gives us granular control over the appearance, speed, and layering of the rain.

The Concept: We'll create multiple small elements that represent raindrops. Each drop will be a tall, thin rectangle, and we'll animate its position from top to bottom. By staggering their animations and varying their properties, we can create a convincing illusion of depth.

Let's start by defining what a single raindrop looks like.

<!-- Add this inside the .rain-container -->
<div class="rain-container">
    <div class="raindrop"></div>
    <div class="raindrop"></div>
    <div class="raindrop"></div>
    <!-- ... add about 50-100 of these for a good effect -->
</div>

Manually adding 100 divs is tedious. We'll solve this with Sass later, but for now, you can copy-paste a few to see it work. Or, even better, use a little JavaScript snippet in your browser's console to generate them for you:

// Run this in your browser's console to populate the container
const container = document.querySelector('.rain-container');
for (let i = 0; i < 100; i++) {
    const drop = document.createElement('div');
    drop.className = 'raindrop';
    container.appendChild(drop);
}

Now, let's style and animate these raindrop elements.

.raindrop {
    position: absolute;
    bottom: 100%; /* Start above the screen */
    width: 1px;
    height: 50px;
    background-color: #ffffff;
    opacity: 0.3;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(120vh); /* Fall past the bottom of the screen */
    }
}

Breakdown:

  1. position: absolute; allows us to place each drop independently within the .rain-container.
  2. bottom: 100%; initially places the drop just above the visible top of the container.
  3. width, height, and background-color define the visual appearance of the drop—a thin white streak.
  4. The fall animation uses transform: translateY() to move the drop vertically. We use 120vh to ensure it moves completely off-screen at the bottom.

Right now, all the drops will fall in a single line from the same spot and at the same speed. This isn't rain; it's a curtain! The key to realism is randomness.

Creating Depth and Randomness

We need to vary the left position, animation-duration, and animation-delay for each drop. Doing this manually in CSS is impractical. This is where a preprocessor like Sass shines, but we can simulate it with a bit of inline styling via JavaScript.

Let's enhance our JS generator:

const container = document.querySelector('.rain-container');
for (let i = 0; i < 100; i++) {
    const drop = document.createElement('div');
    drop.className = 'raindrop';

    // Random horizontal position
    drop.style.left = `${Math.random() * 100}vw`;
    
    // Random animation duration
    drop.style.animationDuration = `${0.5 + Math.random() * 0.5}s`;
    
    // Random animation delay
    drop.style.animationDelay = `${Math.random() * 5}s`;

    // Random opacity to create depth
    drop.style.opacity = Math.random() * 0.5;

    container.appendChild(drop);
}

Now, when you run this script, it generates 100 raindrops, each with a unique horizontal position, falling speed, starting delay, and opacity. This immediately creates a much more organic and layered effect. Fainter, slower drops appear further away, while more opaque, faster drops seem closer.

Method 3: The Professional Workflow with Sass

While the JavaScript approach works perfectly, it mixes concerns. The structure (HTML/JS) is defining the style. For a pure CSS solution that's maintainable and powerful, we turn to a CSS preprocessor like Sass (SCSS).

Sass allows us to use logic like loops and functions to generate our CSS, which is perfect for creating a large number of unique raindrops without writing repetitive code.

The Concept: We'll use a Sass @for loop to generate unique CSS rules for a set number of raindrop elements. Each rule will have randomized properties.

First, update your HTML to have numbered raindrop elements. This is still a bit manual, but it keeps the logic in our stylesheet.

<!-- Inside .rain-container -->
<div class="raindrop-group">
    <!-- We'll create 100 drops -->
    <div class="drop"></div>
    <div class="drop"></div>
    <!-- ... x100 -->
</div>

Now, here's the magic with SCSS. We'll create a loop that styles each .drop using the :nth-child selector.

// SCSS file (e.g., style.scss)

// Basic raindrop styles
.drop {
    position: absolute;
    bottom: 100%;
    width: 2px;
    height: 120px; /* Taller drops for a more dramatic effect */
    pointer-events: none; /* Make them unclickable */
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.4));
    animation: drop-fall linear infinite;
}

@keyframes drop-fall {
    to {
        transform: translateY(110vh);
    }
}

// The magic loop
$total-drops: 100;

.raindrop-group {
    position: relative;
    width: 100%;
    height: 100%;
}

@for $i from 1 through $total-drops {
    .drop:nth-child(#{$i}) {
        // Random horizontal position (vw units)
        left: #{random(100)}vw;

        // Random animation delay (seconds)
        animation-delay: #{random(40) / 10}s;

        // Random animation duration (seconds)
        animation-duration: #{0.5 + random(3) / 10}s;

        // Add some variation in height
        height: #{60 + random(60)}px;

        // Vary opacity for depth
        opacity: #{random(30) / 100 + 0.2};
    }
}

SCSS Breakdown:

  1. We define a variable $total-drops to control how many raindrops we generate styles for.
  2. The @for loop runs from 1 to 100.
  3. Inside the loop, we use the :nth-child(#{$i}) selector to target each individual .drop element.
  4. #{...} is Sass interpolation, which allows us to inject the result of an expression (like random()) directly into a CSS property.
  5. random(100) generates a random integer between 1 and 100. We use this to set the left position, animation-delay, animation-duration, height, and opacity.
  6. We've also improved the drop's appearance with a linear-gradient, making it fade out at the top for a more streak-like look.

This SCSS code will compile into a large but highly efficient CSS file that styles each of the 100 drops uniquely, creating a rich, dynamic, and layered rain effect with zero JavaScript required for the animation logic.

Adding Extra Polish: Lightning Flashes

A storm isn't complete without a bit of lightning. We can add this dramatic effect with a very simple CSS animation that flashes the screen.

The Concept: We'll create a full-screen pseudo-element that is normally transparent. Its animation will rapidly change its opacity to white and back to transparent, simulating a lightning flash.

Add this to your CSS, targeting the .rain-container:

.rain-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0;
    animation: lightning 7s linear infinite;
}

@keyframes lightning {
    0% { opacity: 0; }
    50% { opacity: 0; }
    51% { opacity: 0.2; }
    52% { opacity: 0; }
    53% { opacity: 0.5; }
    54% { opacity: 0; }
    100% { opacity: 0; }
}

How it Works:

  • We use the ::before pseudo-element this time (since ::after might be used by the simple rain method).
  • It starts with opacity: 0, making it invisible.
  • The lightning keyframe animation is set to a long duration (e.g., 7 seconds) to make the flashes feel more random and infrequent.
  • Most of the animation's timeline is spent at opacity: 0.
  • Around the 50% mark, we have a rapid sequence of opacity changes (0 -> 0.2 -> 0 -> 0.5 -> 0). This creates a quick, stuttering flash that feels more natural than a simple on/off blink.

You can duplicate the flash sequence at different points in the keyframe timeline (e.g., at 20% and 70%) to have multiple flashes within one animation cycle.

Performance, Accessibility, and Best Practices

Creating beautiful animations is fun, but we must also be responsible developers. Here are some critical considerations:

  1. Use transform and opacity: Animate transform and opacity whenever possible. These properties can be handled by the browser's GPU (hardware acceleration), resulting in much smoother animations that don't bog down the main CPU thread. Avoid animating properties like top, left, or margin, as they trigger expensive layout recalculations.

  2. The will-change Property: If you know an element's property will be animated, you can give the browser a heads-up using will-change. This allows the browser to perform optimizations in advance. Use it sparingly, as it can consume memory.

    .raindrop {
    /* ... other styles */
    will-change: transform, opacity;
}

  3. Respect User Preferences: Some users experience motion sickness or discomfort from animations. Modern web development includes honoring the prefers-reduced-motion media query. We can disable our animations for these users.

    @media (prefers-reduced-motion: reduce) {
    .raindrop, .rain-container::before, .rain-container::after {
        animation: none !important;
    }
}

    This is a crucial step for building inclusive and accessible websites.

  4. Element Count: Be mindful of how many elements you're creating. While 100 drops might be fine on a desktop, it could be slow on a low-powered mobile device. Test your effect on various devices and consider reducing the number of drops for smaller screens using media queries.

Conclusion: Go Make a Splash!

We've journeyed from a simple, static background image to a fully dynamic, layered, and atmospheric rainstorm built with modern CSS and Sass. We've seen how to:

  • Set the mood with a dark, gradient background.
  • Create a simple, performant effect with an animated background-image.
  • Build dynamic, pure CSS raindrops and randomize them for realism.
  • Leverage Sass loops for a professional and maintainable workflow.
  • Add dramatic flair with a CSS-only lightning effect.
  • Keep our animations performant and accessible.

The true power of these techniques lies in experimentation. Tweak the colors, adjust the speed and density of the rain, change the angle of the streaks, or even combine methods. A rainy background is a fantastic way to add personality and depth to a webpage, turning a simple visit into a memorable experience.

Now it's your turn. Try these techniques out, and don't be afraid to get creative. Share your stormy creations in the comments below!

Discuss on Twitter • View on GitHub