---
title: "Radial Gradient — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ali Çorak · Backgrounds. Get Depth A radial gradient background that goes way beyond CSS — blend up to 10 colors with a movable focal point, custom falloff…"
canonical: "https://framer.elliotli.dev/component/radial-gradient"
---

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

# Radial Gradient

Customizable radial gradient

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

![Radial Gradient preview image 1](https://framer.elliotli.dev/og/component/radial-gradient/fdb97887adfb5e07/1600x1067.jpg)

## Summary

Get Depth A radial gradient background that goes way beyond CSS — blend up to 10 colors with a movable focal point, custom falloff curves, and optional shape distortion, all…

## Description

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

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

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

A radial gradient background that goes way beyond CSS — blend up to 10 colors with a movable focal point, custom falloff curves, and optional shape distortion, all rendered as a lightweight static shader with zero animation overhead.

**Features**

-   Up to 10 blended colors — build rich, multi-stop radial gradients instead of a flat 2-color fade
    
-   Focal point control — move the gradient's center off-axis with distance and angle for asymmetric, off-center compositions
    
-   Falloff control — switch between linear decay and sharper or softer radial curves
    
-   Mixing control — dial the blend from sharp color bands to smooth, seamless transitions
    
-   Optional distortion — add radial wave distortion with adjustable frequency and offset for a less "perfect" shape
    
-   Grain layer — mix grain into the gradient edges or add a full post-processing grain overlay
    
-   Built in Paper style, running on a lightweight, zero-dependency shader engine for smooth performance
    

**Controls**

-   Colors
    
-   Background Color
    
-   Radius
    
-   Focal Distance
    
-   Focal Angle
    
-   Falloff
    
-   Mixing
    
-   Distortion
    
-   Distortion Shift
    
-   Distortion Freq
    
-   Grain Mixer
    
-   Grain Overlay
    
-   Scale / Rotation / Offset
    

**How to use**

1.  Add the Static Radial Gradient component onto your canvas
    
2.  Add up to 10 colors to build your gradient palette
    
3.  Move the Focal Distance and Focal Angle to reposition the gradient's center
    
4.  Adjust Radius and Falloff to control the size and decay of the gradient
    
5.  Optionally add Distortion for a more organic, non-perfect radial shape
    
6.  Fine-tune Mixing until the color transitions feel exactly right
    

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 · #8898

## Details

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