---
title: "Gradient Blinds — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Rohit Anand · Backgrounds. Gradient Blinds."
canonical: "https://framer.elliotli.dev/component/gradient-blinds"
---

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

# Gradient Blinds

Framer Background Mouse Reactive C

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

![Gradient Blinds preview image 1](https://framer.elliotli.dev/og/component/gradient-blinds/8ff443bcd63d8823/1600x850.jpg)

## Summary

Gradient Blinds.

## Description

## Gradient Blinds

Add a dynamic, interactive gradient background to your Framer website with **Gradient Blinds**. The component combines colorful gradients, animated light movement, blind-style patterns, mouse interaction, and subtle distortion to create a modern liquid/glass-inspired visual effect.

Live Preview: [https://frostglass.framer.website/](https://frostglass.framer.website/?editSite)

Gumroad Link: [https://rohitanand.gumroad.com/l/sqaxvg?wanted=true](https://rohitanand.gumroad.com/l/sqaxvg?wanted=true)

### Features

-   **Multi-Color Gradients** — Add up to 8 custom colors.
    
-   **Interactive Mouse Effect** — Spotlight follows the user's cursor with smooth damping.
    
-   **Gradient Angle** — Rotate the gradient from 0° to 360°.
    
-   **Blind Count** — Control the number of animated gradient sections.
    
-   **Mirror Gradient** — Create symmetrical gradient patterns.
    
-   **Spotlight Controls** — Adjust radius, softness, and opacity.
    
-   **Noise** — Add subtle organic texture to the background.
    
-   **Distortion** — Add movement and warping to the gradient.
    
-   **Shine Direction** — Switch the blind highlight direction.
    
-   **Responsive** — Automatically adapts to the size of its Framer frame.
    
-   **Performance Optimized** — WebGL animation pauses when the component is outside the viewport.
    
-   **Static Rendering Support** — Includes a static fallback for Framer's canvas, export, and static rendering environments.
    
-   **Fully Customizable** — Adjust the visual style directly through Framer Property Controls.
    

### Perfect For

Use Gradient Blinds for **hero sections, landing pages, SaaS websites, portfolios, Web3 websites, backgrounds, feature sections, and interactive visual effects** where you want a strong visual element without adding complicated setup.

**Built with WebGL for smooth, GPU-powered visual effects while including viewport and static-renderer optimizations for better Framer performance.**

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

-   All · #8265

## Details

- **Author**: Rohit Anand
- **Price**: $10.00
- **Published**: 2026-08-21
- **Updated**: 2026-08-21
- **Added**: 2026-08-21
- **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