Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
Dark Glow Pricing — Free Website Section Template
Pricing · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
Dark Glow Pricing — Free Dark Pricing Section Template
Dark Glow Pricing is a pricing section for products with a dark, modern look, such as AI tools, developer platforms and creative apps. Plan cards sit on a deep background with a soft brand-coloured halo, and the recommended plan is wrapped in a glowing gradient border that draws the eye straight to it.
Up to four plans
Start with Hobby, Pro and Enterprise and add a fourth if you need it. Each plan has its own icon, name, description, monthly and yearly price, button and feature list. "Custom" pricing works too: add a price note such as "tailored to your team" and it replaces the /month suffix.
The glow, in pure CSS
The gradient border mixes your brand colour with cyan and pink, so it adapts when you change the theme. No images are involved, and switching to a light preset turns it into a bright, colourful border instead.
Billing switch with GSAP Flip
The monthly/yearly switch slides its pill with GSAP Flip and rolls the prices in. It's accessible, works without the animation and respects reduced-motion settings. Turn it off if your prices are monthly only.
Animated and exportable
The heading reveals with SplitText and the cards stagger in on scroll. Export HTML, a ZIP, React or Vue, or fork into My Code. For a light version, see Three-Tier Pricing.
Why use it
Why Use the Dark Glow Pricing
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the heading, monthly / yearly switch and plans in the panel. Switch the monthly / yearly switch on or off. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
The card has 1px of padding over a linear gradient background mixed from your brand colour, and the inner panel sits on top, so only a thin gradient edge shows. A box-shadow in the brand colour adds the glow. It is all CSS.
Yes. Type Custom (or "Contact us") as the price and add a price note such as "tailored to your team"; the note replaces the /month suffix.
Yes. Pick a light colour preset or apply your brand kit. The gradient border and halo use your brand colour, so they still work on light themes.
Up to four. The grid fits them in one row on wide screens and wraps to fewer columns on smaller ones.
It saves an editable copy of your Dark Glow Pricing in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.
Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.