Skip to content
Finance Medium #tax-brackets#marginal

Tax Bracket Staircase

Income falls into brackets like water filling steps. Only the top dollars pay the top rate.

A free, animated tax bracket staircase you can read here or embed on any website, from Scrollchart.

Tax Bracket Staircase

Tax Bracket Staircase0%10%20%30%40%$0k$100k$200k$300k$400k$500k$600kTaxable IncomeTax Rate12%22%24%32%35%37%

A staircase of tax brackets with an income amount visualized as water filling each bracket. Only the top portion pays the marginal rate; effective rate shown as a separate horizontal line. Common misconceptions (raises pushing all income up) are explicitly debunked.

Good for

  • Tax basics articles
  • Personal-finance education
  • Articles addressing tax-bracket myths

Source & accuracy

This tax bracket staircase is an editorial illustration built to represent the concept accurately. Where it shows figures, they are typical or representative values chosen to make the relationship clear, not a single underlying dataset. The diagram and its explainer are reviewed and maintained centrally, and updated over time as understanding improves.

Marginal rates apply to income step by step

Tax brackets work like water filling successive containers. The first $11,000 of income for a single filer is taxed at 10%, the next chunk up to $44,000 at 12%, and so on. Only the income within each bracket faces that bracket's rate, not the entire income.

This is why jumping to a higher tax bracket never results in lower take-home pay. The higher rate applies only to the marginal income entering that bracket, not retroactively to all income.

Effective rate versus marginal rate

The marginal rate is the tax rate on the next dollar earned. The effective rate is total tax divided by total income. Someone with a 24% marginal rate might have a 16% effective rate because lower-bracket income was taxed at lower rates.

Tax planning often focuses on marginal rate management: timing large income events or charitable deductions to stay in a lower bracket, or recognizing that earning a bonus might push income into a higher bracket and cost more in taxes than the bonus amount.

Embed this diagram

Add this animated tax bracket staircase to your own site. Copy one line of HTML, or use the embed builder for theme and sizing options.

Reference

What this is
A free, embeddable, animated tax bracket staircase for any website.
Who uses it
Personal-finance blogs, Fintech content sites.
How to embed
Copy one line of HTML. No signup. No watermark. Works in WordPress, Webflow, Ghost, Substack, plain HTML.
File size
iframe embed, ~80 KB gzipped (loads on demand, does not block your page paint).
License
Free forever. Editorial explainer text included; updated centrally over time.

Embed format options

Copy the universal HTML snippet, the WordPress shortcode, or an iframe fallback - see the WordPress plugin page for details. Any format keeps the same Core Web Vitals profile and the same explainer text.

Embed snippet
<div data-scrollchart="tax-bracket-staircase" data-scrollchart-v="1"></div>
<script src="https://scrollchart.com/embed.js" async></script>

Frequently asked questions

Where can I get a free animated "Tax Bracket Staircase" for my website?
Scrollchart provides "Tax Bracket Staircase" as a free, embeddable animated diagram you can add to any website with one line of HTML. No signup is required and there is no watermark. The diagram and its explainer text are served from scrollchart.com, so the embed stays current without any maintenance on your end.
How do I add a tax bracket staircase to a finance or business article?
Copy the embed snippet from the Scrollchart page for this diagram and paste it anywhere in your article HTML. It is compatible with WordPress, Webflow, Ghost, Substack, and static HTML pages. No account or API key is needed.