* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}.calculator-container {
max-width: 1100px;
width: 100%;
background: white;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.3);
}.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 40px;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}.header::before {
content: ”;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
animation: pulse 4s infinite;
}@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.1); opacity: 0.3; }
}.header-content {
position: relative;
z-index: 1;
}.header h1 {
font-size: 42px;
margin-bottom: 10px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}.header-icon {
font-size: 48px;
animation: bounce 2s infinite;
}@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}.header p {
font-size: 16px;
opacity: 0.95;
}.main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}.calculator-section {
padding: 50px;
background: #f8f9fa;
}.results-section {
padding: 50px;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
}.input-group {
margin-bottom: 30px;
}.input-label {
display: block;
font-size: 14px;
font-weight: 700;
color: #333;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
}.input-icon {
font-size: 18px;
}.input-wrapper {
position: relative;
}.input-field {
width: 100%;
padding: 18px 50px 18px 20px;
border: 3px solid #e0e0e0;
border-radius: 14px;
font-size: 18px;
font-weight: 600;
transition: all 0.3s ease;
background: white;
}.input-field:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}.input-symbol {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
font-weight: 700;
color: #667eea;
}.discount-presets {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 30px;
}.preset-btn {
padding: 15px;
border: 2px solid #e0e0e0;
background: white;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
color: #667eea;
cursor: pointer;
transition: all 0.3s ease;
}.preset-btn:hover {
background: #667eea;
color: white;
border-color: #667eea;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}.preset-btn.active {
background: #667eea;
color: white;
border-color: #667eea;
}.tax-toggle {
display: flex;
align-items: center;
gap: 15px;
padding: 20px;
background: white;
border-radius: 14px;
margin-bottom: 30px;
border: 2px solid #e0e0e0;
}.toggle-switch {
position: relative;
width: 60px;
height: 30px;
}.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 30px;
}.toggle-slider:before {
position: absolute;
content: “”;
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}.toggle-switch input:checked + .toggle-slider {
background-color: #667eea;
}.toggle-switch input:checked + .toggle-slider:before {
transform: translateX(30px);
}.toggle-label {
font-weight: 600;
color: #333;
flex: 1;
}.calculate-btn {
width: 100%;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 14px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
text-transform: uppercase;
letter-spacing: 1px;
}.calculate-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
}.calculate-btn:active {
transform: translateY(0);
}.result-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 16px;
margin-bottom: 25px;
border: 2px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}.result-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: scale(1.02);
}.result-label {
font-size: 14px;
opacity: 0.9;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}.result-value {
font-size: 48px;
font-weight: 800;
display: flex;
align-items: center;
gap: 10px;
}.result-icon {
font-size: 42px;
}.savings-highlight {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
padding: 35px;
border-radius: 16px;
text-align: center;
box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
margin-top: 20px;
}.savings-highlight .result-label {
font-size: 16px;
margin-bottom: 15px;
}.savings-highlight .result-value {
font-size: 56px;
justify-content: center;
}.breakdown-section {
padding: 40px 50px;
background: #f8f9fa;
border-top: 2px solid #e0e0e0;
}.breakdown-title {
font-size: 24px;
font-weight: 700;
color: #1e3c72;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
}.breakdown-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}.breakdown-item {
background: white;
padding: 25px;
border-radius: 14px;
border: 2px solid #e0e0e0;
transition: all 0.3s ease;
}.breakdown-item:hover {
border-color: #667eea;
box-shadow: 0 5px 20px rgba(102, 126, 234, 0.1);
transform: translateY(-3px);
}.breakdown-item-label {
font-size: 13px;
color: #666;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}.breakdown-item-value {
font-size: 28px;
font-weight: 700;
color: #1e3c72;
}.comparison-chart {
margin-top: 30px;
background: white;
padding: 30px;
border-radius: 14px;
border: 2px solid #e0e0e0;
}.chart-title {
font-size: 18px;
font-weight: 700;
color: #1e3c72;
margin-bottom: 20px;
}.chart-bar {
margin-bottom: 20px;
}.chart-bar-label {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
}.chart-bar-track {
height: 40px;
background: #f0f0f0;
border-radius: 20px;
overflow: hidden;
position: relative;
}.chart-bar-fill {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 15px;
color: white;
font-weight: 700;
transition: width 1s ease;
}.tips-section {
padding: 40px 50px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}.tips-title {
font-size: 24px;
font-weight: 700;
color: #92400e;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}.tips-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}.tip-card {
background: white;
padding: 25px;
border-radius: 14px;
border-left: 4px solid #f59e0b;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}.tip-icon {
font-size: 32px;
margin-bottom: 15px;
}.tip-title {
font-size: 16px;
font-weight: 700;
color: #92400e;
margin-bottom: 10px;
}.tip-text {
font-size: 14px;
color: #666;
line-height: 1.6;
}@media (max-width: 968px) {
.main-content {
grid-template-columns: 1fr;
}.header h1 {
font-size: 32px;
}.calculator-section,
.results-section,
.breakdown-section,
.tips-section {
padding: 30px;
}.discount-presets {
grid-template-columns: repeat(2, 1fr);
}.result-value {
font-size: 36px;
}.savings-highlight .result-value {
font-size: 42px;
}
}@media (max-width: 568px) {
body {
padding: 10px;
}.header {
padding: 25px;
}.header h1 {
font-size: 24px;
}.header-icon {
font-size: 32px;
}.calculator-section,
.results-section,
.breakdown-section,
.tips-section {
padding: 20px;
}.discount-presets {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}.preset-btn {
padding: 12px;
font-size: 14px;
}.breakdown-grid,
.tips-grid {
grid-template-columns: 1fr;
}.result-value {
font-size: 32px;
}
}
Discount Calculator
Calculate savings and final prices instantly
$
%
Include Sales Tax
Final Price
$75.00
Discount Amount
$25.00
✨ You Save ✨
$25.00
📋 Price Breakdown
Original Price
$100.00
Discount (%)
25%
You Pay
$75.00
💹 Price Comparison
💡 Shopping Tips
Stack Coupons
Combine store discounts with manufacturer coupons for maximum savings.
Timing Matters
Shop during seasonal sales, Black Friday, or end-of-season clearances.
Compare Prices
Always check multiple stores and online retailers before purchasing.
Use Rewards
Leverage credit card rewards and store loyalty programs for extra savings.
About This Discount Calculator
A discount calculator makes it easy to figure out how much you actually save when prices drop. Whether it’s a seasonal sale, a clearance event, or a quick promo, this tool shows you the real amount you’ll pay after discounts and taxes.
How It Works
Enter the original price, choose your discount percentage, and hit calculate. You’ll instantly see how much money you save, how much you’re paying after the discount, and what the total looks like with tax included if needed. You can also use the preset buttons for quick discounts like 10%, 25%, or 50%.
Why It’s Useful
Instead of guessing the final amount at checkout, you can see the breakdown in advance. It’s a simple way to plan your spending, compare offers, or double-check if that “40% off” really makes sense. The chart helps you visualize how the price changes before and after the discount.
Tips for Smarter Shopping
- Combine discounts and reward programs to maximize savings.
- Always check if sales tax is added after discounts — it can change the total.
- Compare final prices from multiple stores, not just the percentage off.
- Use the calculator on both online and in-store offers for quick decisions.
