A sale price display — the original price shown crossed out next to the discounted price, often with a savings badge — is a standard e-commerce pattern that immediately communicates value to a shopper.
Enter your original and sale prices, and this tool generates a styled display with the original price struck through, the sale price emphasized, and the calculated percentage discount shown as a badge, ready to preview and copy as HTML and CSS.
The percentage discount is calculated automatically from your two price inputs, so you don't need to compute it separately — just enter the two prices and the badge updates to show the accurate savings percentage.
Because everything runs locally in your browser, results appear instantly and nothing you type or upload is ever sent to a server.
Bookmark this page if you expect to use this tool regularly — it loads fast and behaves the same way every time, with no account needed.
This kind of task shows up constantly in everyday writing, coding, design, and admin work, which is exactly why a dedicated, focused tool saves so much back-and-forth.
A tool that does one job well, without a cluttered interface or unrelated features competing for attention, tends to be faster to use than a heavier all-in-one app.
If you find yourself needing this often, keeping this page open in a tab is usually faster than digging through a bigger software suite's menus.
Frequently asked questions
Is the discount percentage calculated automatically?
Yes, entering the original and sale prices automatically calculates and displays the percentage saved, so you don't need to compute that separately.
Can I use a currency other than dollars?
Yes, the generated markup shows plain numeric values — add your own currency symbol in the HTML to match your site's currency.