---
title: "Perlin Noise — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ali Çorak · Backgrounds. Get Depth The classic animated 3D Perlin noise, exposed as a fully controllable Framer component — a smooth, organic 2-color pattern…"
canonical: "https://framer.elliotli.dev/component/perlin-noise"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Perlin Noise

# Perlin Noise

The classic animated Perlin noise

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

![Perlin Noise preview image 1](https://framer.elliotli.dev/og/component/perlin-noise/dcf36481e1cfdceb/1600x1200.jpg)

## Summary

Get Depth The classic animated 3D Perlin noise, exposed as a fully controllable Framer component — a smooth, organic 2-color pattern that's equally at home as a subtle background…

## Description

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

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

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

The classic animated 3D Perlin noise, exposed as a fully controllable Framer component — a smooth, organic 2-color pattern that's equally at home as a subtle background texture or a bold, high-contrast hero visual.

**Features**

-   2-color blend — set Background and Foreground colors, with a Proportion control to shift the balance between them
    
-   Softness control — go from a hard, high-contrast edge to a smooth, dreamy gradient blend
    
-   Multi-octave detail — layer up to 8 octaves for anything from a simple soft cloud to a richly detailed, fractal-like pattern
    
-   Persistence & Lacunarity — fine-tune the roughness and frequency step between octaves for full control over the pattern's character
    
-   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**

-   Background Color
    
-   Foreground Color
    
-   Proportion
    
-   Softness
    
-   Octave Count
    
-   Persistence
    
-   Lacunarity
    
-   Speed
    
-   Scale / Rotation / Offset
    

**How to use**

1.  Add the Perlin Noise component onto your canvas
    
2.  Set your Background and Foreground colors
    
3.  Adjust Proportion and Softness to set the balance and sharpness between the two colors
    
4.  Increase Octave Count for a more detailed, layered pattern, and fine-tune Persistence and Lacunarity to shape its character
    
5.  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 · #9550

## Details

- **Author**: Ali Çorak
- **Price**: $5.00
- **Published**: 2026-07-04
- **Updated**: 2026-08-16
- **Added**: 2026-07-04
- **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