---
title: "Random Background — Framer component · Best of Framer"
description: "$3.00 · Framer component · by Ali Çorak · Backgrounds. Random Background selects a color from either a generated palette or your own custom color list, creating a simple way to make layouts…"
canonical: "https://framer.elliotli.dev/component/random-background"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Random Background

# Random Background

Changing color background

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

![Random Background preview image 1](https://framer.elliotli.dev/og/component/random-background/f721270b4deb7880/1600x1200.jpg)

## Summary

Random Background selects a color from either a generated palette or your own custom color list, creating a simple way to make layouts feel more playful and dynamic.

## Description

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

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

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

Add a changing color background to any section, frame, or page. Random Background selects a color from either a generated palette or your own custom color list, creating a simple way to make layouts feel more playful and dynamic.

You can keep one randomly selected color on each page load or let visitors generate a new background color by clicking the component.

**How to use**

Drop the component into your layout and set it to fill the area you want to color. Choose between automatically generated colors or create a custom palette from the properties panel.

Enable the click interaction to select a new color whenever the background is clicked, then adjust the fade duration to control how smoothly colors transition.

**Features**

-   Random background color on page load
    
-   Automatically generated or custom color palettes
    
-   Add and remove custom colors
    
-   Optional click-to-randomize interaction
    
-   Adjustable fade transition duration
    
-   Smooth transitions between colors
    
-   Works inside sections, frames, and full-page layouts
    
-   Responsive across desktop, tablet, and mobile
    
-   No setup or coding required
    

**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 · #8604

## Details

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