CARRD TEMPLATES

How it works

CARRD TEMPLATES

Back to tools

FREE WEBSITE TOOL

Build pricing cards your way.

Create and customize pricing cards for any website. Preview them instantly, then copy one self-contained HTML and CSS block.

✓

No account

✓

Customizable cards

✓

No dependencies

01Add your pricing cards
02Style the live preview
03Copy the finished code

Your pricing cards

3 / 4

Cards

01Card 1

Plan nameBadgeSubtitlePricePeriodFeaturesOne feature per line. Empty lines are ignored.Button text

Button actionButton linkAdd a destination to activate this button. Website addresses get https:// automatically. You can also use /page or #section.Open in

Highlight this card

02Card 2

Plan nameBadgeSubtitlePricePeriodFeaturesOne feature per line. Empty lines are ignored.Button text

Button actionButton linkAdd a destination to activate this button. Website addresses get https:// automatically. You can also use /page or #section.Open in

Highlight this card

03Card 3

Plan nameBadgeSubtitlePricePeriodFeaturesOne feature per line. Empty lines are ignored.Button text

Button actionButton linkAdd a destination to activate this button. Website addresses get https:// automatically. You can also use /page or #section.Open in

Highlight this card

Your ready-to-use code

Self-contained HTML + CSS in one block

<!-- Free pricing cards by CarrdTemplates.com. Edit this block whenever you like. -->
<style>
.ctpw-widget{--ctpw-accent:#2EA0FF;--ctpw-text:#FFFFFF;--ctpw-muted:#A5A5A5;--ctpw-block:#151515;--ctpw-card:#242424;--ctpw-border:#414141;--ctpw-block-radius:1rem;--ctpw-card-radius:.75rem;--ctpw-button-radius:.75rem;--ctpw-gap:1rem;--ctpw-cols:3;display:block;box-sizing:border-box;container-type:inline-size;width:100%;max-width:none;padding:20px;background:var(--ctpw-block);border:1px solid var(--ctpw-border);border-radius:var(--ctpw-block-radius);font-family:Inter,Arial,sans-serif;color:var(--ctpw-text)}
.ctpw-widget *{box-sizing:border-box}
.ctpw-grid{display:grid;grid-template-columns:repeat(var(--ctpw-cols),minmax(0,1fr));gap:var(--ctpw-gap);align-items:stretch}
.ctpw-card{display:flex;flex-direction:column;min-width:0;min-height:440px;gap:24px;padding:28px;background:var(--ctpw-card);border:1px solid var(--ctpw-border);border-radius:var(--ctpw-card-radius);overflow:hidden}
.ctpw-featured{border:2px solid var(--ctpw-accent);padding:27px}
.ctpw-cardTop{display:flex;flex-direction:column;gap:42px}
.ctpw-heading{display:flex;flex-direction:column;gap:8px;min-width:0}
.ctpw-headingRow{display:flex;align-items:start;justify-content:space-between;gap:10px;min-height:33px}
.ctpw-heading h3{margin:0;color:var(--ctpw-text);font-size:26px;font-weight:700;line-height:1.15;letter-spacing:-.035em;overflow-wrap:anywhere}
.ctpw-badge{display:inline-flex;align-items:center;flex:0 0 auto;max-width:50%;padding:7px 10px;border-radius:8px;background:var(--ctpw-accent);color:var(--ctpw-block);font-size:11px;font-weight:750;line-height:1.2;letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}
.ctpw-subtitle{margin:0;color:var(--ctpw-muted);font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.ctpw-priceRow{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;min-height:62px}
.ctpw-price{color:var(--ctpw-text);font-size:clamp(38px,5cqw,56px);font-weight:750;line-height:1;letter-spacing:-.055em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ctpw-period{color:var(--ctpw-muted);font-size:15px;line-height:1.4}
.ctpw-features{display:flex;flex-direction:column;gap:18px;min-width:0;margin:0;padding:24px 0 0;border-top:1px solid var(--ctpw-border);list-style:none}
.ctpw-features li{display:flex;align-items:start;gap:10px;color:var(--ctpw-text);font-size:15px;line-height:1.4;overflow-wrap:anywhere}
.ctpw-check{display:grid;place-items:center;flex:0 0 18px;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--ctpw-accent);color:var(--ctpw-block);font-size:12px;font-weight:800;line-height:1}
.ctpw-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:auto;padding:12px 18px;border:1px solid var(--ctpw-border);border-radius:var(--ctpw-button-radius);background:var(--ctpw-border);color:var(--ctpw-text);font-size:15px;font-weight:700;line-height:1.25;text-align:center;text-decoration:none;overflow-wrap:anywhere;transition:filter .18s ease,transform .18s ease}
.ctpw-featured .ctpw-button{border-color:var(--ctpw-accent);background:var(--ctpw-accent);color:var(--ctpw-block)}
a.ctpw-button:hover{filter:brightness(1.12);transform:translateY(-2px)}
a.ctpw-button:focus-visible{outline:2px solid var(--ctpw-accent);outline-offset:3px}
.ctpw-buttonDemo{cursor:default}
@container (max-width:1100px){.ctpw-grid[data-cols="4"]{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container (max-width:840px){.ctpw-grid[data-cols="3"],.ctpw-grid[data-cols="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:540px){.ctpw-grid[data-cols="2"],.ctpw-grid[data-cols="3"],.ctpw-grid[data-cols="4"]{grid-template-columns:minmax(0,1fr)}.ctpw-card{min-height:0}.ctpw-cardTop{gap:32px}}
@media(max-width:560px){.ctpw-widget{padding:12px}.ctpw-card{padding:22px}.ctpw-featured{padding:21px}}
@media(prefers-reduced-motion:reduce){.ctpw-button{transition:none}a.ctpw-button:hover{transform:none}}
</style>
<div class="ctpw-widget" style="--ctpw-accent:#2EA0FF;--ctpw-text:#FFFFFF;--ctpw-muted:#A5A5A5;--ctpw-block:#151515;--ctpw-card:#242424;--ctpw-border:#414141;--ctpw-block-radius:1rem;--ctpw-card-radius:0.75rem;--ctpw-button-radius:0.75rem;--ctpw-gap:1rem;--ctpw-cols:3">
  <div class="ctpw-grid" data-cols="3">
    <article class="ctpw-card"><div class="ctpw-cardTop"><div class="ctpw-heading"><div class="ctpw-headingRow"><h3>Basic</h3></div><p class="ctpw-subtitle">For a simple start</p></div><div class="ctpw-priceRow"><strong class="ctpw-price">$29</strong><span class="ctpw-period">/ month</span></div></div><ul class="ctpw-features"><li><span class="ctpw-check" aria-hidden="true">✓</span><span>Essential feature</span></li><li><span class="ctpw-check" aria-hidden="true">✓</span><span>Another useful feature</span></li><li><span class="ctpw-check" aria-hidden="true">✓</span><span>Basic support</span></li></ul><span class="ctpw-button ctpw-buttonDemo" aria-disabled="true">Get started</span></article>
    <article class="ctpw-card ctpw-featured"><div class="ctpw-cardTop"><div class="ctpw-heading"><div class="ctpw-headingRow"><h3>Standard</h3><span class="ctpw-badge">Popular</span></div><p class="ctpw-subtitle">For growing projects</p></div><div class="ctpw-priceRow"><strong class="ctpw-price">$59</strong><span class="ctpw-period">/ month</span></div></div><ul class="ctpw-features"><li><span class="ctpw-check" aria-hidden="true">✓</span><span>Everything in Basic</span></li><li><span class="ctpw-check" aria-hidden="true">✓</span><span>More powerful features</span></li><li><span class="ctpw-check" aria-hidden="true">✓</span><span>Priority support</span></li><li><span class="ctpw-check" aria-hidden="true">✓</span><span>Extra flexibility</span></li></ul><span class="ctpw-button ctpw-buttonDemo" aria-disabled="true">Choose Standard</span></article>
    <article class="ctpw-card"><div class="ctpw-cardTop"><div class="ctpw-heading"><div class="ctpw-headingRow"><h3>Premium</h3></div><p class="ctpw-subtitle">For bigger ambitions</p></div><div class="ctpw-priceRow"><strong class="ctpw-price">$99</strong><span class="ctpw-period">/ month</span></div></div><ul class="ctpw-features"><li><span class="ctpw-check" aria-hidden="true">✓</span><span>Everything in Standard</span></li><li><span class="ctpw-check" aria-hidden="true">✓</span><span>Advanced features</span></li><li><span class="ctpw-check" aria-hidden="true">✓</span><span>Dedicated support</span></li><li><span class="ctpw-check" aria-hidden="true">✓</span><span>Custom options</span></li></ul><span class="ctpw-button ctpw-buttonDemo" aria-disabled="true">Get started</span></article>
  </div>
</div>

Paste the complete block into an HTML or Embed element. Everything is stored in the code itself; nothing is loaded from a server.

CarrdFramerWebflowWordPressAny HTML site

The Pricing Cards Builder is free thanks to you. Say thanks with a coffee on Ko-fi.

CARRD TEMPLATES

CARRD TEMPLATES

Build pricing cards your way.

Build pricing cards your way.

Your pricing cards

Basic

Standard

Premium

Your ready-to-use code

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1501+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1501+ customers.

CARRD TEMPLATES

Website templates for businesses, built with Carrd.

Tools

Journal

How it works

Contact

© 2026 Carrd Templates

Trusted by 1501+ customers.