Related Snippets

60 by shared tags
1 / 10
Hero with 3D Tilting Product Mockup

Hero with 3D Tilting Product Mockup

Flip Pricing Card

Flip Pricing Card

Retro Grid

Retro Grid

Scroll Canvas Starfield Warp Speed

Scroll Canvas Starfield Warp Speed

Three.js Scroll Shader Ripple Distortion

Three.js Scroll Shader Ripple Distortion

CSS View Timeline Card Flip In

CSS View Timeline Card Flip In

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Mega CTA Banner — Free HTML CSS JS Gradient Call to Action

Mega CTA Banner · Heroes · Plain HTML, CSS & JS · Live preview

Tags3D EffectsLanding Page

What's included

Features

Layered gradient panel
Glow and grid behind, content on top.
Cursor-following glow
--gx/--gy ease toward the pointer.
Masked CSS grid
Repeating gradients faded at the edges.
Own stacking context
isolation contains the z-index layers.
Inline email capture
Real form with focus ring and success.
Gradient CTA button
Lifts on hover, presses on click.
Fluid headline
clamp() scales type without breakpoints.
Responsive form
Wraps to two rows on small screens.

About this UI Snippet

Mega CTA Banner — A Gradient Conversion Block With a Living Glow

Screenshot of the Mega CTA Banner snippet rendered live

The mega CTA banner is the big, high-contrast call-to-action block at the bottom of a landing page — a rich gradient panel with an eyebrow, a bold headline, an inline email capture, and an interactive glow that follows the cursor. This snippet builds it with plain HTML, CSS, and a small vanilla JavaScript handler for the glow and form.

A layered gradient panel

The banner is a rounded, clipped section with a multi-stop diagonal gradient background and three stacked layers controlled with z-index: a cursor-tracking glow and a faint grid sit behind the content, which sits on top. isolation: isolate gives the banner its own stacking context so the negative z-index layers stay contained within it rather than slipping behind the page.

The cursor-following glow

A large, blurred radial circle (.mc-glow) is positioned by two CSS custom properties, --gx and --gy, which a mousemove handler updates to the cursor's location inside the banner. A short transition on left/top makes the glow ease toward the pointer with a slight lag, so it feels like a soft light drifting under the surface rather than snapping. On mouseleave it returns to a resting position, keeping the banner alive even when idle.

A masked perspective grid

A subtle technical grid is drawn purely in CSS from two repeating linear-gradients (horizontal and vertical 1px lines), then faded at the edges with a radial mask so it dissolves into the gradient instead of ending in a hard rectangle. This masked-grid technique is what gives modern developer-tool banners their "infinite surface" feel, and it costs nothing — no image, no SVG.

Inline email capture

The CTA is a real <form> with an email input and a gradient submit button that lifts on hover and presses on click. The input shows a proper focus ring, and the form wraps gracefully to two rows on narrow screens. On submit the handler prevents the default, swaps the supporting note to a green success message, and resets the field — the typical waitlist/early-access flow you'd wire to an API.

Responsive and legible

The headline uses clamp() so it scales smoothly between mobile and desktop without breakpoints, the content is centred with a constrained measure for readability, and the whole banner sizes to its container. Everything stays legible over the gradient because the content layer sits above the decorative glow and grid.

Customizing it

Change the gradient, the glow colour, the grid density, or the copy; replace the email capture with a pair of buttons; or post the email to your backend. Pair it with a newsletter signup, a waitlist signup, or an animated gradient CTA.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You do not need to guess why the glow uses custom properties instead of direct style writes. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly how the mousemove handler's setProperty calls on --gx and --gy interact with the CSS transition on left and top to produce the easing lag, and why isolation: isolate on the banner is necessary given the glow and grid both sit at a negative z-index. The same assistant can help optimize it, for instance asking whether writing two custom properties on every mousemove event risks layout thrash compared to throttling the handler with requestAnimationFrame. It is also useful for extending the banner: ask it to add a second, slower-drifting glow layer for more depth, wire the form submission to a real waitlist API with a loading state on the button, or make the grid density responsive to viewport width. 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 a "mega CTA banner" in plain HTML, CSS, and JavaScript with no libraries.

Requirements:
- A rounded, clipped section with a multi-stop diagonal gradient background and its own CSS stacking context (so any negatively z-indexed decorative children stay contained within the banner rather than slipping behind the page).
- Two decorative layers behind the content: a large blurred radial-gradient circle whose position is driven by two CSS custom properties, and a faint grid pattern built from two repeating linear-gradients (not an image), masked with a radial gradient so it fades out at the edges instead of ending in a hard rectangle.
- A mousemove listener on the banner that computes the cursor's position relative to the banner's own bounding rect (not the viewport) and writes it to the two custom properties controlling the glow's position, with a CSS transition on the glow's position properties so it eases toward the cursor with a slight lag rather than snapping instantly; a mouseleave handler must reset the glow to a fixed resting position.
- A real form with an email input and a submit button, where the input has a visible focus ring, the button visually lifts on hover and compresses slightly on active press, and the layout wraps to two rows gracefully on narrow viewports.
- Submitting the form must prevent the default page reload, swap a supporting note element's text to a success message with a distinct color, and reset the input field.
- The headline must scale fluidly between mobile and desktop sizes using a CSS clamp() function rather than fixed breakpoints.

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.

Source Code

<section class="mc-banner" id="mcBanner">
  <div class="mc-glow" id="mcGlow"></div>
  <div class="mc-grid"></div>
  <div class="mc-content">
    <span class="mc-eyebrow">✦ Limited beta</span>
    <h2 class="mc-title">Ship your next idea<br/>before the weekend.</h2>
    <p class="mc-sub">Spin up production-ready infrastructure in minutes. No credit card, no config — just deploy.</p>
    <form class="mc-form" id="mcForm">
      <input type="email" class="mc-input" placeholder="you@company.com" required aria-label="Work email" />
      <button type="submit" class="mc-btn">Get early access</button>
    </form>
    <p class="mc-note" id="mcNote">Join 12,400+ developers on the waitlist.</p>
  </div>
</section>

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA gradient CTA banner renders with a glow.
  2. 2
    Move the cursor over itThe glow drifts toward the pointer.
  3. 3
    Focus the email fieldA focus ring appears on the input.
  4. 4
    Submit the formThe note flips to a green confirmation.
  5. 5
    Edit the copyChange the eyebrow, headline, and note.
  6. 6
    Recolor itSwap the gradient and glow colors.

Real-world uses

Common Use Cases

Landing footers
Close the page above a mega footer.
Waitlists
An expressive waitlist signup.
Newsletters
A bolder newsletter signup.
Launches
Pair with a coming soon hero.
Promotions
Echo an animated gradient CTA.
Sticky combo
Reinforce a sticky CTA footer.
Related: Search-Engine-Style Hero
See the Search-Engine-Style Hero for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

A large blurred radial circle is positioned by two CSS custom properties, --gx and --gy, which a mousemove handler updates to the cursor's location inside the banner. A short transition on left and top makes the glow ease toward the pointer with a slight lag, so it drifts like a soft light rather than snapping, and returns to rest on mouseleave.

The grid is drawn from two repeating linear-gradients — horizontal and vertical 1px lines — then faded at the edges with a radial mask so it dissolves into the gradient instead of ending in a hard rectangle. This masked-grid technique gives the modern infinite-surface look with no image or SVG.

The glow and grid sit at negative z-index so they fall behind the content. isolation: isolate gives the banner its own stacking context, which keeps those negative-z-index layers contained within the banner rather than slipping behind the page background. Without it, the decorative layers could disappear under the page.

The submit handler prevents the default navigation, swaps the supporting note to a green success message, and resets the input — the typical waitlist or early-access flow. In production you would post the email to your backend or email service inside that handler before showing the confirmation.

Render the markup as a component and bind the email input to state with onChange/v-model/ngModel. Handle submit to call your API and toggle a submitted flag that switches the note text and class. Update the glow position by writing --gx and --gy to a ref on mouse move, imperatively, to avoid re-rendering per move. The gradient, grid, and glow CSS port unchanged.