← Back to Skills / Marketplace / radial-glow
SKL · 42PRO

Radial Glow.

Luminous concentric rings of light blooming and spiraling outward from a single center point, color-cycling through the full iridescent spectrum on pure black — a striking, otherworldly hero rendered live by a raw WebGL2 shader.

UNLOCK WITH PRO →
● Live preview · Radial Glow demo
● This is a live shader, not a video
↗ New tab
01 · The Vibe

Radial Glow is a real-time animated background of luminous concentric rings blooming outward from a single center point, slowly cycling through the full iridescent spectrum on pure black. It looks like light radiating from a source you can't see — vivid neon arcs drifting and breathing on their own, never looping the same way twice. Drop it behind a big bold headline and you've got the most striking hero section in whatever you're competing with. This is the skill for a background that makes people stop and watch before they read a word.

● Looks Like
Neon light-art installationsIridescent ring visualizersThe kind of dramatic full-spectrum hero that gets shared as a screenshotCosmic energy field aestheticsPremium product reveals where the background is doing as much work as the headline
02 · Best For / Avoid If
＋ Best For
+Hero sections for landing pages and product launches
+Premium AI and tech product sites that want a bold, otherworldly first impression
+Music, creative, and entertainment platforms
+Waitlist, coming-soon, and launch moment pages
+Any dark-themed hero where the background needs to be genuinely jaw-dropping
+Portfolio and studio sites that want their technical craft to show immediately
× Avoid If
×Your design is light or minimal — Radial Glow lives on pure black and won't fit a bright, airy look
×Your brand is calm, understated, or corporate — this is a bold, luminous, dramatic effect by nature
×You need top performance on very low-end devices — it's a raw WebGL2 shader running pixel-by-pixel in real time
×Your page is content-heavy and a full-spectrum animated background would compete for attention
03 · Design Philosophy
01

Concentric rings from a single source

Every arc blooms outward from one center point, each slightly offset in color and phase so they drift past each other in a slow spiral. That single focal point gives the background its depth and frames whatever headline sits in the middle.

02

Color that cycles, never repeats

The arcs shift through the full spectrum continuously — a live GPU color calculation every frame, not a looping gradient. That's why it never looks the same twice and holds attention the way a static gradient can't.

03

Pure black makes the light glow

The arcs only read as luminous because the background is pure black — light on black glows, light on gray just looks colored. That blackness gives the rings their glow, keeps text readable, and makes the effect feel lit from within.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — mention the skill name to invoke it automatically
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Text that gets lost in the rings
The arcs move, so a headline sitting over a bright ring is readable one moment and less so the next. Keep your key text in the center focal zone where the rings are sparser, and use white or very light text throughout.
! WARNING
Going too lively for a focused page
The fast speed setting looks stunning in a showcase but can drain attention from a page where the message matters as much as the visual. Match the speed to the energy you need — calm for focused conversion pages, lively for pure wow moments.
! WARNING
Using it as a section background
Radial Glow is a hero moment, not a repeatable section treatment. One instance per page, in the most important position, is where it lands hardest.
! WARNING
Clashing brand colors
The brand-color mode renders the rings in your hue by desaturating the animation and tinting it, so almost any brand color works — but very pale or very desaturated brand colors can disappear on black. Lean toward vivid hex values for the brand mode.
● 07 · Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →