The animated gradient CTA is the eye-catching conversion block at the bottom of modern landing pages: a rounded panel lit from behind by a slowly rotating, blurred rainbow glow, with a headline and an inline email signup. This snippet builds the full section in plain HTML, CSS, and a little vanilla JavaScript — including the layered background, focus states, and a submit flow that confirms in place.

The rotating conic glow

The colorful light is a single .ag-glow element stretched well beyond the panel with inset: -40% and painted with a conic-gradient that cycles indigo, pink, amber, and cyan back to indigo. A heavy filter: blur(70px) melts those color stops into a soft aurora, and an agSpin keyframe rotates it a full 360° over nine seconds. Because it sits at z-index: -2 behind the content and the panel uses overflow: hidden, only the part inside the rounded corners shows, so the glow reads as ambient light leaking from behind the card.

A grain overlay for texture

Flat gradients can look plasticky, so a .ag-grain layer adds subtle noise. It's a tiny radial-gradient dot tiled at 4px via background-size, set to mix-blend-mode: overlay so the dots interact with the colors beneath rather than sitting on top as gray specks. This is a zero-image way to give the gradient a premium, textured finish. isolation: isolate on the panel keeps that blend mode contained to this component.

Layered with z-index and isolation

Three stacked layers compose the look: the spinning glow at -2, the grain at -1, and the content at 1. Keeping the content above its own stacking context (via isolation: isolate) guarantees the overlay blend never bleeds onto the page behind the section, which is a common bug when blend modes escape their container.

The inline signup

The form pairs an email input with a submit button. The input has a clear focus ring — a pink border plus a soft box-shadow halo — so keyboard users always see where they are. On submit, JavaScript prevents the default navigation, disables the button and shows a "Joining…" label, then after a short simulated delay hides the form and replaces the helper note with a success message that echoes the entered address. Swap the setTimeout for a real fetch to your signup endpoint and the UX stays identical.

Respecting the user's battery

A continuously spinning, blurred gradient is GPU work, so a visibilitychange listener pauses the animation by setting animationPlayState to paused whenever the tab is hidden, and resumes it on return. That small courtesy stops the effect from draining battery in a background tab.

Customizing it

Change the conic-gradient color stops to your brand palette, slow or speed the agSpin duration, dial the blur and opacity for a subtler or more intense glow, and adjust the grain dot size and opacity. The button hover lift and the focus ring are independent, so you can restyle them freely. On screens under 520px the form stacks vertically. Pair it with a scroll velocity marquee above or a testimonial wall to close a landing page with momentum.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work through the layering yourself — paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why isolation: isolate on the panel is necessary given the grain layer's mix-blend-mode: overlay, and what would visually leak onto the page if it were removed. The same assistant is useful for optimizing it — asking whether pausing the conic-gradient spin on visibilitychange is enough or whether it should also pause when the element scrolls out of view via IntersectionObserver. It's just as good for extending the CTA: ask it to add real email validation with inline error states before the fake submit delay, wire the form to an actual API endpoint with proper error handling and a retry path, or make the conic-gradient colors and grain density configurable via CSS custom properties for a theming system. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build an "animated gradient CTA" section in plain HTML, CSS, and JavaScript — no libraries, using a layered conic-gradient glow, a noise texture, and an inline email capture form.

Requirements:
- A rounded panel with overflow hidden and CSS isolation set to isolate, containing three stacked layers behind the content: a large element (bigger than the panel, using a negative inset) filled with a multi-color conic-gradient, heavily blurred with a CSS filter, and continuously rotated with a linear infinite keyframe animation; and a second full-coverage layer painted with a small tiled radial-gradient dot pattern set to mix-blend-mode: overlay to add grain texture, layered via z-index below the actual content.
- Foreground content (a small pill/badge, a large bold heading, a supporting paragraph, and an inline form) must sit above both background layers using explicit stacking.
- The form must contain an email input with a visible focus state (a colored border plus a soft box-shadow halo) and a submit button. On submit, prevent the default page navigation, disable the button and change its label to a loading state, then after a short simulated delay hide the form entirely and replace a helper text element with a confirmation message that includes the submitted email address.
- Add a document-level visibilitychange listener that pauses the conic-gradient's CSS animation (via animationPlayState) whenever the browser tab is hidden, and resumes it when the tab becomes visible again, to avoid wasting GPU cycles in a background tab.
- Make the form responsive: stack the input and button vertically instead of side-by-side below a defined breakpoint.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA rounded CTA panel glows with a slowly spinning rainbow light.
2
Notice the textureA subtle grain overlay gives the gradient a premium finish.
3
Focus the email fieldA pink ring and halo make the focus state obvious.
4
Submit the formThe button shows Joining, then a success note echoes your email.
5
Switch tabsThe gradient pauses while the tab is hidden to save battery.
6
Recolor and retimeEdit the conic stops, spin duration, blur, and grain.

Real-world uses

Common Use Cases

Landing-page footers

Close a page below a testimonial wall.

Waitlist capture

An alternative to a full waitlist signup form.

Newsletter blocks

A bolder take on a newsletter signup.

Product launches

Follow a scroll velocity marquee band.

Beta invites

Pair the badge with a sticky promo bar.

Gradient effect demos

A reference for layered conic-glow backgrounds.

Got questions?

Frequently Asked Questions

A single oversized element with inset: -40% is filled with a conic-gradient of four colors and blurred heavily with filter: blur(70px), then rotated 360 degrees on a 9-second keyframe. It sits behind the content at z-index -2, and the panel's overflow: hidden clips it to the rounded corners so it reads as ambient backlight.

It tiles a 1px radial-gradient dot every 4 pixels and uses mix-blend-mode: overlay so the noise interacts with the colors beneath instead of sitting on top as gray dots. That breaks up the flat gradient and gives the panel a textured, premium finish with zero image assets.

The grain layer uses an overlay blend mode. Without a new stacking context, that blend can bleed onto whatever sits behind the section on the page. isolation: isolate creates a contained stacking context so the blend only affects the panel's own layers, which is the standard fix for escaping blend modes.

No. A visibilitychange listener sets the glow's animationPlayState to paused whenever document.hidden is true and back to running on return. A blurred, continuously rotating gradient is real GPU work, so pausing it off-screen is a meaningful courtesy on laptops and phones.

The markup and CSS port directly. Handle submit with a framework event handler that calls your signup API and toggles a submitted boolean to swap the form for the success note. Add the visibilitychange listener in a mount effect with cleanup on unmount. In Tailwind, build the glow with an absolute element using bg-[conic-gradient(...)], blur-3xl, and an animate-spin-slow keyframe.

Loading…