Compound interest for your website
Free to put on any site. A starting amount, a monthly deposit and a rate, and it shows what the balance becomes, split into what went in and what the interest added.
Accent colour
The real widget, running here with your settings.
What it does
The point of a compound interest calculator is not the final balance. It is the split. On the default figures, 10,000 growing at 7% with 200 added every month for twenty years ends up around 144,000, of which 58,000 was paid in and the rest is interest. Seeing those two parts side by side is the argument for starting early, and no paragraph makes it as well as the bar does.
Deposits are added at the end of each month, so the first one earns nothing in the month it arrives, which is how a real account behaves. Compounding frequency is a menu covering annual through to daily, and the arithmetic is exact at every setting: twelve monthly growth factors multiply out to precisely the textbook annual figure.
It also handles the cases that break simpler versions. A zero rate returns the deposits untouched. Starting from nothing and saving monthly still works. A negative rate is allowed, because that is what an account losing to inflation looks like.
The full version, with a year-by-year table, is the compound interest calculator on this site.
How to install it
Copy the code above and paste it into your page where you want the calculator to show. It is ordinary HTML, so it goes wherever HTML goes.
WordPress
In the block editor, add a Custom HTML block and paste the code into it. In the classic editor, switch from Visual to Text first. For a sidebar, use a Custom HTML widget under Appearance, then Widgets. Some managed hosts strip script tags from posts written by non-administrator accounts, in which case paste it while signed in as an administrator.
Wix, Squarespace and Shopify
Wix: add an Embed HTML element and paste the code into the code panel. Squarespace: add a Code block and turn off Display Source. Shopify: paste it into a section or page written in the code editor rather than the rich text field, which removes scripts.
Plain HTML
Paste both lines into the body of the page. The script tag can sit next to the div or at the end of the document, and it only needs to appear once even if the page holds several calculators.
Settings you can change
Every option is a data attribute on the div, so the script itself never needs editing.
| Attribute | What it does | Example |
|---|---|---|
data-theme | Light or dark surface | dark |
data-accent | Colour of the balance and link | #0d9488 |
data-currency | Symbol in front of every amount | £ |
data-title | Heading text, or empty for none | Grow your savings |
data-compound | How often interest is added | annually |
The widget renders inside a shadow root with its own stylesheet, so your site's CSS cannot reach in and break it, and your own rules are equally safe from ours. It caps itself at 420px wide and shrinks to fit anything narrower. To control where it sits, wrap the div in a container of your own.
Terms of use
By using this code you agree:
- The materials are provided as is, without warranty of any kind.
- Not to alter the calculation logic in the script.
- Not to remove the "powered by Calculator Castle" credit link.
- That copyright in the code belongs to calculatorcastle.com.
- Not to remove these terms from the standalone version.
Results are estimates for planning and carry no warranty. Neither you nor your visitors should treat the output as professional advice.
Common questions
Questions about the widget
Is the widget free?
Yes, on any site, including commercial ones. No fee, no account and no usage limit. The one condition is that the "powered by Calculator Castle" link stays visible.
Does it handle regular deposits?
Yes. A monthly amount is added at the end of each month, so the first deposit earns nothing in the month it arrives, matching how a real savings account works. The results separate the starting amount, the total added and the interest earned.
Which compounding frequencies does it support?
Annual, semi-annual, quarterly, monthly and daily, chosen from a menu. The data-compound attribute sets which one it opens with. The maths is exact at every setting rather than approximating daily compounding with a monthly loop.
What about a zero or negative rate?
Both work. A zero rate returns exactly what was paid in, which is the useful sanity check. A negative rate is allowed too, since it is what a balance losing value to inflation looks like.
Is it a projection or a promise?
A projection, and it assumes a constant rate, which no real investment has. It is a way of showing the shape of compounding, not a forecast of any particular account.
How big is it?
13 KB, around 4.4 KB compressed over the wire, loaded with the async attribute so it never blocks your page. No libraries, no fonts, no images and no network requests once loaded.
Will it clash with my site styles?
No. It renders inside a shadow root with its own stylesheet, so your CSS cannot reach into it and its CSS cannot leak out. We test that against a page that sets width, colour and font on every input and button with !important.
Does it track my visitors?
No. It sets no cookies, stores nothing and sends nothing back to us. Everything is worked out in the browser of the person using it, so it needs no cookie banner of its own.
Projections assume a constant rate and are not investment advice. See all embeddable calculators.