---
title: "Sticky Grid Gradient — Free Framer component · Best of Framer"
description: "Free Framer component · by Sirrah Space · Backgrounds. Add a highly dynamic, premium aesthetic to your Framer website with the Sticky Grid Gradient component."
canonical: "https://framer.elliotli.dev/component/sticky-grid-gradient"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Sticky Grid Gradient

# Sticky Grid Gradient

Animated glowing grid background.

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

![Sticky Grid Gradient preview image 1](https://framer.elliotli.dev/og/component/sticky-grid-gradient/8fdc8297931abddc/1600x1200.jpg)

## Summary

Add a highly dynamic, premium aesthetic to your Framer website with the Sticky Grid Gradient component.

## Description

Add a highly dynamic, premium aesthetic to your Framer website with the Sticky Grid Gradient component. This advanced background effect features a sharp, customizable grid layer illuminated from behind by four smoothly animating gradient blobs. As users scroll, the sticky container keeps the mesmerizing light show perfectly framed in the viewport, illuminating the grid lines organically as the glowing orbs drift and pulse.

Designed for maximum creative control and stellar performance. You can customize the grid size, line thickness, base colors, and assign four distinct colors to the gradient blobs to match your brand palette. Tweak the blur amount, movement spread, and pulse speed to create anything from a subtle ambient glow to an energetic, high-contrast neon grid. Engineered with an Intersection Observer, the animation automatically pauses when scrolled off-screen, ensuring a buttery-smooth experience while saving CPU resources.

**Functions (Key Features):**

-   ✨ **Animated Glow:** Four distinct gradient blobs that pulse and drift organically in the background.
    
-   🏁 **Crisp Grid Mask:** A lightweight CSS-generated grid that flawlessly masks the glowing blobs behind it.
    
-   📌 **Sticky Scrolling:** Keeps the gradient animation perfectly anchored in the viewport while users scroll down the page.
    
-   🎨 **Full Customization:** Adjust grid sizing, line thickness, blur intensity, and 4 unique blob colors.
    
-   🚀 **Smart Performance:** Framer Motion animations automatically pause when off-screen to preserve device battery and CPU.
    

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

-   All · #3180

## Details

- **Author**: Sirrah Space
- **Published**: 2026-09-02
- **Updated**: 2026-09-02
- **Added**: 2026-09-02
- **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