---
title: "Sparkles Background — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sobakhul Munir Siroj · Backgrounds. Animated Sparkle Particle Background Sparkles Background is a lightweight, canvas-powered animation component for Framer…"
canonical: "https://framer.elliotli.dev/component/sparkles-background"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Sparkles Background

# Sparkles Background

Animated sparkle particle background

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

![Sparkles Background preview image 1](https://framer.elliotli.dev/og/component/sparkles-background/96ee34e85fbcac98/1600x1200.jpg)

## Summary

Animated Sparkle Particle Background Sparkles Background is a lightweight, canvas-powered animation component for Framer that adds subtle, floating sparkle particles to your…

## Description

## Animated Sparkle Particle Background

Sparkles Background is a lightweight, canvas-powered animation component for Framer that adds subtle, floating sparkle particles to your designs. Each particle gently twinkles and drifts, creating an elegant atmosphere ideal for modern hero sections, feature blocks, and immersive layouts—all while staying performance friendly.

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-faf2zpdd-Nv5kCZMMBOZgBaHBQnzJLYuat9eOA9)

### Key Features:

-   **Smooth Canvas Animation** – Hardware-accelerated rendering for fluid motion
    
-   **Customizable Particles** – Adjust color, density (100–3000), and size range
    
-   **Gradient Accents** – Optional dual-color top gradients for added depth
    
-   **Radial Masking** – Soft fade edges for seamless blending with content
    
-   **Fully Responsive** – Automatically adapts to any container or screen size
    
-   **Performance Optimized** – Efficient particle system that won’t slow your site
    
-   **Zero Dependencies** – Pure React implementation, no external libraries
    

### Customization Controls:

**Particle Settings**

-   Particle Color
    
-   Particle Density (100–3000)
    
-   Min / Max Size (0.1px–5px)
    

**Visual Effects**

-   Background Color
    
-   Gradient Toggle (on/off)
    
-   Dual Gradient Colors
    
-   Radial Mask Toggle
    
-   Mask Radius (100px–800px)
    

### How to Use:

1.  Drag Sparkles Background onto your canvas
    
2.  Resize to fit any section or full-screen layout
    
3.  Adjust particle color and density
    
4.  Enable gradients or masking for different styles
    
5.  Layer content on top using Framer stacks or positioning
    

### Ideal Use Cases:

-   Hero sections & landing pages
    
-   Product highlights
    
-   Event banners
    
-   Portfolio headers
    
-   Testimonial blocks
    
-   Call-to-action backgrounds
    
-   Loading or transition screens
    
-   Premium feature sections
    

### Try it Out!

Add subtle magic to your Framer projects. Install Sparkles Background today and create polished, animated visuals that elevate your design instantly.

If you need help or run into any issues, feel free to reach out at: [sobakhul.munir527@gmail.com](mailto:sobakhul.munir527@gmail.com)

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

-   All · #7636

## Details

- **Author**: Sobakhul Munir Siroj
- **Price**: $5.00
- **Published**: 2026-03-04
- **Updated**: 2026-03-04
- **Added**: 2026-02-11
- **Categories**: Backgrounds

## More like this

-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background
-   [Fractal Glass Wave](/component/fractal-glass-wave) — Hienn Ng · $3 — Dynamic Fractal Glass Background
-   [Particle Flow Pro](/component/particle-flow-pro) — Interface Studio · $10 — Bring Your Background to Life
-   [Silk Gradient](/component/silk-gradient) — Kaisa A · Free — Silk Gradient Background