---
title: "CrystalMesh Gradient — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Sirrah Space · Backgrounds. Animated low-poly plexus."
canonical: "https://framer.elliotli.dev/component/crystalmesh-gradient"
---

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

# CrystalMesh Gradient

Animated low-poly plexus.

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

![CrystalMesh Gradient preview image 1](https://framer.elliotli.dev/og/component/crystalmesh-gradient/dac0c40de58c62e1/1600x1200.jpg)

## Summary

Animated low-poly plexus.

## Description

Elevate your website with **Crystal Mesh Gradient**, a high-performance generative background that combines **low-poly aesthetics** with a dynamic **plexus network**. This component renders floating geometric shards and connected nodes using HTML5 Canvas, ensuring buttery-smooth performance even on mobile devices.

It creates a sophisticated, "tech-savvy" atmosphere, making it the ideal choice for **crypto platforms**, **AI startups**, and modern portfolios. Choose from beautiful built-in presets like "Neon Night" and "Ocean Blue," or fully customize the palette to match your brand identity.

**Functions (Key Features):**

-   💎 **Dual Effect:** Combines semi-transparent crystal shards (triangles) with a connected line network (plexus).
    
-   🎨 **Theme Presets:** Includes 6 ready-to-use themes (Neon, Ocean, Sunset, Forest, Royal) plus a Custom mode.
    
-   ⚡ **Canvas Rendering:** Built on the HTML Canvas API for ultra-fast, lag-free animation compared to heavy video files.
    
-   🎛️ **Adjustable Complexity:** Control the Density to make the mesh sparse and clean, or dense and complex.
    
-   🚀 **Custom Motion:** Tweak the animation Speed to create a calm ambient effect or a high-energy background.
    

**How to Use:**

1.  **Insert:** Drag the **Crystal Mesh Gradient** component onto your canvas.
    
2.  **Sizing:** Set Width and Height to **"Fill" (100%)** to cover the entire section.
    
3.  **Theme:** In the properties panel, select a **Theme** (e.g., "Neon Night"). If you want specific colors, switch to "Custom".
    
4.  **Customize:** If using "Custom", pick your **Start/End Colors** for the gradient and the **Line/Shard Colors**.
    
5.  **Fine Tune:** Adjust **Density** (try 6-8 for balanced looks) and **Speed** (0.1 for slow, 1 for fast) to suit your vibe.
    

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

-   All · #9410

## Details

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