---
title: "Rain Overlay — Framer component · Best of Framer"
description: "$9.00 · Framer component · by FramerHub.io  · Sections. Rain Overlay Add accurate, performant rain effects to your website with this customizable component."
canonical: "https://framer.elliotli.dev/component/rain-overlay"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Rain Overlay

# Rain Overlay

rain particles weather effect

[View on Framer](https://framer.com/marketplace/components/rain-overlay/?via=elliot-li)

![Rain Overlay preview image 1](https://framer.elliotli.dev/og/component/rain-overlay/04c6a73e482d89f3/1600x1200.jpg)

## Summary

Rain Overlay Add accurate, performant rain effects to your website with this customizable component.

## Description

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-1e3e8l9w-WGgbytZS1kPWsp61Vmn3yzgbXzQN59)](https://framerhub.io/components?utm_source=framer_marketplace&utm_medium=framer_marketplace_components&utm_content=RainOverlay)

## Rain Overlay

Add accurate, performant rain effects to your website with this customizable component. Perfect for adding atmosphere and depth to your designs.

## Features

### Customizable Simulation

Control the number of raindrops, their speed, wind direction, and length to match your desired aesthetic.

### Realistic Splashes

Enable splashes for drops hitting the bottom of the container, with optional ripples for added realism.

### Versatile Styles

Choose from multiple rain styles including Lines, Dots, Mixed, Heavy, and Realistic to fit any design language.

## Use Cases

### Atmospheric Backgrounds

Use it as a subtle overlay on hero sections to create a mood.

### Weather Widgets

Perfect for weather-related interfaces or data visualization.

### Customization

Detailed control over the rain simulation.

### Simulation

\- **Count**: Number of raindrops (20-500)

\- **Speed**: Vertical falling speed

\- **Wind**: Horizontal drift

\- **Length**: Length of rain lines

### Appearance

\- **Style**: Choose between Lines, Dots, Mixed, Heavy, or Realistic

\- **Color**: Raindrop color

\- **Opacity**: range of opacity for depth

### Quick Tips

**Performance** — Keep particle count under 200 for best performance on mobile devices.

**Depth** — Use a lower opacity range (0.3 - 0.6) for a more subtle, integrated look.

### License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

### Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Rank history [How rankings work →](/terms#rankings)

-   All · #9813

## Details

- **Author**: FramerHub.io
- **Price**: $9.00
- **Published**: 2026-05-25
- **Updated**: 2026-04-07
- **Added**: 2025-12-27
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove