---
title: "Ethereal Mesh — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Backgrounds. Immerse your users in a calming visual experience with Ethereal Mesh."
canonical: "https://framer.elliotli.dev/component/ethereal-mesh"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Ethereal Mesh

# Ethereal Mesh

Dreamy rotating soft mesh gradient

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

![Ethereal Mesh preview image 1](https://framer.elliotli.dev/og/component/ethereal-mesh/f33babdf19635202/1600x1200.jpg)

## Summary

Immerse your users in a calming visual experience with Ethereal Mesh.

## Description

Immerse your users in a calming visual experience with **Ethereal Mesh**. This component isn't just a static gradient; it features a smooth, continuous animation where four distinct pastel colors gently rotate and blend across the corners of the container.

Designed to keep the center clean for your content, it creates a "breathing" background effect. It is built with high-performance framer-motion transitions, ensuring buttery smooth rendering on all devices without the weight of video files. Ideally suited for SaaS landing pages, wellness apps, or modern portfolios that need a touch of elegance.

**Key Features:**

-   🔄 **Rotating Animation:** Colors automatically cycle through the four corners, creating a dynamic, living background.
    
-   ☁️ **Soft Aura:** High-blur settings create a dreamy, cloud-like atmosphere.
    
-   🎨 **Corner Splashes:** Keeps the center area neutral (customizable), perfect for overlaying text or hero images.
    
-   🛠️ **Fully Customizable:** Adjust the 4-color palette, blur intensity, opacity, and base background color.
    
-   ⚡ **Lightweight:** CSS-based blurring ensures high performance and sharp visuals at any screen size.
    

**How to Use**

1.  **Insert:** Drag the **Ethereal Mesh** component onto your canvas.
    
2.  **Sizing:** Set both **Width** and **Height** to **"Fill" (100%)** to cover your entire section.
    
3.  **Colors:** Open the **Corner Colors** array in the properties panel and choose 4 distinct colors (Pastels work best).
    
4.  **Background:** Set the **Center** color to match your page theme (e.g., White or Light Gray).
    
5.  **Fine Tuning:** Adjust **Blur** (e.g., 80-120px) to control softness and **Opacity** to blend it subtly.
    

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

-   All · #8745

## Details

- **Author**: Sirrah Space
- **Price**: $5.00
- **Published**: 2026-01-20
- **Updated**: 2026-07-26
- **Added**: 2026-01-08
- **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