Pricing Table Generator
Turn your plans into a clear pricing section. Write each plan with its monthly and yearly price, a short description and its features (prefix excluded ones with a dash), and mark one plan as featured. The generator builds responsive cards with a badge, “Free” for zero prices, the yearly saving in percent, crossed-out excluded features with screen-reader text, and buttons that link to your sign-up page with ?plan= added. An optional switch changes between monthly and yearly prices.
- Runs in your browser
- No sign-up
- Free to use
How to use Pricing Table Generator
- Write your plans and features.
- Mark the highlighted plan with *.
- Set currency, unit, button and URL.
- Copy the HTML, CSS and JavaScript.
Pricing Table Generator features
Monthly / yearly
Switch with saving percentage.
Featured plan
Badge and stronger styling.
Clear buttons
Plan name for screen readers.
HTML, CSS, JS
JavaScript only for the switch.
Live preview
See the result in a sandboxed frame as you type.
Accessible markup
Semantic elements, labels, focus styles and contrast checks.
When to use Pricing Table Generator
- SaaS pricing pages.
- Agencies and freelancers with packages.
- Membership and course sites.
- Hosting and app plans.
Pricing Table Generator FAQ
How many plans should I show?
Three is the most common: it makes comparison easy and lets the middle plan stand out.
Do I need the JavaScript?
Only for the monthly/yearly switch. Without yearly prices, no script is generated.
Should prices include tax?
For consumers in the EU and UK, prices must include VAT. State clearly whether prices include tax.
Pricing that is easy to compare
Show the same features in the same order on each plan, highlight the plan most customers should choose, and answer billing questions right below the table.
How it works: you fill in plain text fields and lists, and the generator writes clean, indented HTML and CSS in your browser. Everything you type is escaped before it is placed in the markup, links are checked so that javascript: and data: URLs cannot slip in, and the preview runs in a sandboxed frame without scripts. Nothing is uploaded or stored.
The code has no framework or build step: copy the HTML into a page, template or page-builder HTML block, and the CSS into your stylesheet. Class names use a prefix you choose (BEM style), so they do not clash with your theme, and colours come from your accent colour with automatic contrast checks.
Accessibility is built in: semantic landmarks and headings, real labels on form fields, visible focus outlines, enough colour contrast and layouts that reflow on small screens without horizontal scrolling. The notes under the output explain the decisions and what you still need to do on your side.
Use the presets to start from a typical example, then adapt the text. Related generators on this site cover the other parts of a website – navigation, footer, buttons, cards, forms, FAQ and call-to-action sections – so you can assemble a complete page from consistent pieces.