---
title: "Halcyon — Free Framer component · Best of Framer"
description: "Free Framer component · by Berkay Erdinc · Backgrounds. Halcyon is a real-time WebGL gradient background for Framer — not a video, not an image."
canonical: "https://framer.elliotli.dev/component/halcyon"
---

[Home](/)/[Components](/components)/[Backgrounds](/components/category/backgrounds)/Halcyon

# Halcyon

Animated WebGL gradient backdrops

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

![Halcyon preview image 1](https://framer.elliotli.dev/og/component/halcyon/10a87b8748d51a4c/1600x1200.jpg)

## Summary

Halcyon is a real-time WebGL gradient background for Framer — not a video, not an image.

## Description

Halcyon is a real-time WebGL gradient background for Framer — not a video, not an image. Drop it behind any hero, section, or card and pick from 12 hand-tuned presets, or craft your own palette with up to 5 colors.

Fine-tune speed, scale, warp, grain, and corner radius right from the properties panel. Pure WebGL with no dependencies and no media files, so it stays light and crisp on every screen.

Features

• 12 curated presets (Midnight Aurora, Acid Lime, Plasma Violet, Sunset Drive, Vaporwave & more)

• Custom palette mode — 2 to 5 colors

• Controls: preset, speed, scale, warp, grain, radius

• Pure WebGL, dependency-free, SSR-safe

• Fully responsive

Perfect for SaaS & AI landing pages, hero sections, portfolios, and app backgrounds. Free — you keep everything.

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

-   All · #2109

## Details

- **Author**: Berkay Erdinc
- **Published**: 2026-06-25
- **Updated**: 2026-06-25
- **Added**: 2026-06-25
- **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