Pricing Section With Soft Gradient

Pro

Three plan cards on a blue to peach wash, with a yearly switch and a handwritten save scribble beside the popular middle seat.

When to use Pricing Section With Soft Gradient

Reach for this when pricing should feel like a landing, not a ledger. A periwinkle to peach wash sits behind the header and fades to a quiet floor. Three white cards follow. Sample, Bench, and Atelier are named seats. Yearly lives on a switch, not a pill, and a looped arrow marks the twenty five percent save. Bench is the taller popular card. Atelier is custom, with a contact action. Checks sit in a purple disc.

Skip it when the buyer needs a matrix, nested extras, or a live receipt. A wash behind a comparison table is decoration. The shipped copy is a fictional maker shop called Pollen, so replace the names, the rates, and the feature lines before this goes to production. The surface is fixed light. There is no dark variant, because the periwinkle to peach wash is the whole read.

Block details

Renders
JavaScript animation. Paints first, then animates
Theme
Fixed light surface. No dark variant
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
clsxframer-motiontailwind-merge
Source
356 lines, 18 KB in one file
Install
wensity add pricing-section-with-soft-gradient --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
light, pricing, gradient, toggle, saas
Last updated

More pricing sections