---
title: "Grain Gradient — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ali Çorak · Backgrounds. Grain Gradient component onto your canvas Add up to 7 colors to build your gradient palette Pick a Shape — Sphere and Blob work great…"
canonical: "https://framer.elliotli.dev/component/grain-gradient"
---

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

# Grain Gradient

Grain-textured gradient

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

![Grain Gradient preview image 1](https://framer.elliotli.dev/og/component/grain-gradient/960640059a6f9eb4/1600x1200.jpg)

## Summary

Grain Gradient component onto your canvas Add up to 7 colors to build your gradient palette Pick a Shape — Sphere and Blob work great as hero backgrounds, Truchet and Corners feel…

## Description

**Unlock entire Depth library for $149. One price. Lifetime.**

[**Get Depth**](https://depth.website/#all-access)

**\--------------------------------------------------------**

An animated, grain-textured gradient background — up to 7 colors blended into 7 different abstract shapes, from soft waves to a 3D sphere, all with a built-in noise overlay for a distinctly non-flat, organic finish.

**Features**

-   Up to 7 colors — build rich, multi-stop gradients instead of a flat 2-color fade
    
-   7 shape modes — Wave, Dots, Truchet, Corners, Ripple, Blob, and Sphere, each a completely different composition
    
-   Softness control — go from hard, poster-like color edges to smooth, blended transitions
    
-   Intensity control — adjust how much distortion happens between color bands
    
-   Built-in grain — a noise overlay baked directly into the gradient for texture, no separate grain layer needed
    
-   Fully animated — smooth, continuous motion by default, with full control over speed
    
-   Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance
    

**Controls**

-   Colors
    
-   Background Color
    
-   Softness
    
-   Intensity
    
-   Noise
    
-   Shape
    
-   Speed
    
-   Scale / Rotation / Offset
    

**How to use**

1.  Add the Grain Gradient component onto your canvas
    
2.  Add up to 7 colors to build your gradient palette
    
3.  Pick a Shape — Sphere and Blob work great as hero backgrounds, Truchet and Corners feel more geometric
    
4.  Adjust Softness and Intensity to set how sharp or smooth the color transitions are
    
5.  Dial in Noise for the amount of grain texture
    
6.  Set Speed to control animation pace, or set it to 0 to freeze on a single frame
    

Shader powered by Paper Shaders.

**Refund Policy:** Due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.

Support: [hi@alicorak.com](mailto:hi@alicorak.com)

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

-   All · #8017

## Details

- **Author**: Ali Çorak
- **Price**: $5.00
- **Published**: 2026-07-04
- **Updated**: 2026-08-16
- **Added**: 2026-07-04
- **Categories**: Backgrounds

## More like this

-   [Live_Backgrounds.exe](/component/live-backgrounds-exe) — S̶̈́͂IX BILLIÖ̴́N HERSELF · $19 — Animated backgrounds, 19 presets
-   [Drumskin](/component/drumskin) — KOJA Studios · Free — Interactive dot grid background
-   [Eclipse Ring](/component/eclipse-ring) — Lunaut Studio · $9 — A total eclipse for your hero
-   [Pixel Flicker](/component/pixel-flicker) — Design Foundry · $10 — premium animated pixel background