মূল কনটেন্টে যান

Pricing prompt

With a plan

Emerald Glow Three-Tier Pricing

Three pricing plans with a deep emerald, glowing middle plan, a glossy ribbon, a real monthly and yearly switch, icon chips, check-bubble feature lists and an all-plans strip. Aurora glow, fine grid and grain behind a calm emerald palette.

  • Minimal
  • Cl
  • Cu
  • v0
  • Lo
  • Bo
  • GP
Emerald Glow Three-Tier Pricing section, light theme

A picture of the design. The live, interactive preview, the full prompt and the code unlock with a Dapols plan. See the plans.

Want this on your own site? Pick it for your plan.

The prompt, code and settings

Everything on this page except these four tabs is free to read. The tabs unlock with a paid Dapols plan.

Emerald Glow Three-Tier Pricing is included with every Dapols plan

Free visitors get the free prompts. Any Dapols plan, the one-time setup or the monthly subscription, unlocks every prompt.

Unlocking this prompt gives you:

  • The full prompt, ready to paste
  • Short notes for each AI tool it supports
  • The design as React with Tailwind, and as plain HTML and CSS
  • Every color, font and spacing value in a table
  • Step-by-step tips for using it in each tool

Already have a paid plan?

Not on a plan yet?

The preview, description and FAQ on this page are free. A plan unlocks this prompt and every other one in the library.

See the plans

Want to try one now? Browse the free prompts.

About this design

Good pricing pages point at the plan you want chosen without shouting. Here the outer plans are quiet glass cards with a specular edge, while the middle plan is a deep emerald card that sits higher, wears a luminous mint border and a wide soft glow, and carries a glossy Most chosen ribbon with a slow sheen. Its price is set in a pale gradient and its button is the only mint one, so the eye lands there first. Behind everything sit an aurora glow, a faint grid that fades out and a touch of grain, all in one emerald family so nothing turns muddy. The billing switch is built from real radio inputs inside a fieldset, so it works with a keyboard and a screen reader, and it swaps the sample prices with a short rise and fade. A pill strip underneath lists what every plan includes, and the whole section fits one desktop screen. Light and dark themes are included, and reduced-motion visitors get instant swaps and no sheen.

Pairs well with the Ledger, Quartz and Meridian Looks in the Dapols website studio. See website examples.

Questions about this design

Are the prices in this pricing table real?

No. Every figure is a sample, and the preview says Sample prices on the page. Replace the plan names, features and prices with your own before launch, then remove the caption.

How does the monthly and yearly switch work?

It is a native radio group inside a fieldset, so it works with a keyboard and screen readers. Choosing Yearly swaps each displayed price and billing note, with a short fade that is switched off for visitors who prefer reduced motion.

Can I use more or fewer than three plans?

Yes. The layout is built for three, with the middle one highlighted. For two plans keep the emerald highlight on the one you recommend; for four, drop the raise and keep the glow border and ribbon so the cards stay aligned.

  • Quiet Grain Hero preview

    HeroWith a plan

    Quiet Grain Hero

    A calm, confident hero on a sheet of grainy paper: one huge tight-tracked headline with a hand-drawn accent loop, a topographic contour map of a mountain lake as the only graphic, one button and one quiet link. Warm off-white, near-black and one restrained accent.

    • Minimal
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View
  • Facet Scroll Product Showcase preview

    3D and Three.jsWith a plan

    Facet Scroll Product Showcase

    A four-chapter product page with one sticky canvas: a procedural gem in transmissive, dispersive glass lit by a baked studio, on a lit sweep with a rim glow, while the camera dollies along a spline and the finish changes as you scroll. Three.js, no HDR files.

    • Bold
    • Minimal
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    View
  • Morphing Glass Navbar preview

    NavbarWith a plan

    Morphing Glass Navbar

    A sticky navbar that starts as a full-width bar with a text link and, after a little scroll, shrinks into a floating glass pill with a filled button. Shown over an aurora hero with glass cards and a refraction-edge rim. Includes an accessible mobile sheet.

    • Minimal
    • Glass
    • Cl
    • Cu
    • v0
    • Lo
    • Bo
    • GP
    View

Use this in your own site

Need a whole site, not one section? Pick the designs you like, choose your colors and fonts, and Dapols builds the website for you as part of your plan. Answer a few questions about your business to get started.