Mutual Fund SIP Calculator
:root {
--primary-gradient-start: #2A5C9B;
--primary-gradient-end: #4CAF50;
--accent-bg: #E8F5E9;
--text-dark: #333;
--text-light: #666;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
color: var(--text-dark);
background-color: #fff;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* Header Styles */
header {
text-align: center;
margin-bottom: 40px;
padding: 20px 0;
position: relative;
}
.header-content {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.header-text {
flex: 1;
min-width: 300px;
}
.title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
background: linear-gradient(to right, var(--primary-gradient-start), var(--primary-gradient-end));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
font-size: 1rem;
color: var(--text-light);
font-weight: 400;
}
.header-visual {
flex: 0 0 150px;
height: 150px;
position: relative;
}
/* Input Section Styles */
.input-section {
background: #fff;
border-radius: 12px;
box-shadow: var(--shadow);
padding: 30px;
margin-bottom: 40px;
}
.input-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
}
.input-group {
margin-bottom: 20px;
}
.input-label {
display: block;
font-weight: 500;
margin-bottom: 8px;
}
.input-control {
width: 100%;
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-family: 'Poppins', sans-serif;
transition: border 0.3s ease;
}
.input-control:focus {
outline: none;
border-color: var(--primary-gradient-end);
}
.slider-container {
margin-top: 15px;
}
.slider {
width: 100%;
cursor: pointer;
}
.helper-text {
font-size: 0.8rem;
color: var(--text-light);
margin-top: 5px;
}
.toggle-container {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
margin-right: 10px;
}
.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: .4s;
border-radius: 24px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: var(--primary-gradient-end);
}
input:checked + .toggle-slider:before {
transform: translateX(26px);
}
/* Results Section */
.results-section {
background-color: var(--accent-bg);
border-radius: 12px;
padding: 30px;
text-align: center;
margin-bottom: 40px;
box-shadow: var(--shadow);
}
.result-title {
font-size: 1.2rem;
margin-bottom: 20px;
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-bottom: 25px;
}
.result-item {
padding: 15px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.result-label {
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: 5px;
}
.result-value {
font-size: 1.6rem;
font-weight: 600;
}
.result-value.returns {
color: var(--primary-gradient-end);
}
.result-value.total {
background: linear-gradient(to right, var(--primary-gradient-start), var(--primary-gradient-end));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 1.8rem;
}
.action-btn {
padding: 12px 25px;
background: linear-gradient(to right, var(--primary-gradient-start), var(--primary-gradient-end));
color: #fff;
border: none;
border-radius: 30px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
/* Chart Section */
.chart-section {
background: #fff;
border-radius: 12px;
box-shadow: var(--shadow);
padding: 30px;
margin-bottom: 40px;
}
.chart-container {
position: relative;
height: 300px;
margin-top: 20px;
}
.chart-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.chart-toggle {
display: flex;
background: #f1f1f1;
border-radius: 30px;
padding: 5px;
}
.chart-toggle-btn {
padding: 8px 15px;
border: none;
background: none;
font-family: 'Poppins', sans-serif;
cursor: pointer;
border-radius: 25px;
transition: background 0.3s ease;
}
.chart-toggle-btn.active {
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.export-btn {
background: none;
border: none;
color: var(--primary-gradient-start);
cursor: pointer;
display: flex;
align-items: center;
}
.export-btn svg {
margin-right: 5px;
}
/* Info Section */
.info-section {
margin-bottom: 40px;
}
.faq-container {
margin-bottom: 30px;
}
.faq-item {
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 10px;
overflow: hidden;
}
.faq-question {
padding: 15px;
background: #f9f9f9;
font-weight: 500;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-answer {
padding: 0 15px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq-item.active .faq-answer {
padding: 15px;
max-height: 200px;
}
.benefits-list {
list-style: none;
margin-top: 20px;
}
.benefit-item {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
}
.benefit-icon {
margin-right: 10px;
color: var(--primary-gradient-end);
}
.cta-container {
text-align: center;
margin: 30px 0;
}
/* Footer */
footer {
background: #f9f9f9;
padding: 30px 0;
text-align: center;
margin-top: 60px;
}
.disclaimer {
font-style: italic;
font-size: 0.8rem;
color: var(--text-light);
max-width: 800px;
margin: 0 auto 20px;
}
.footer-links {
margin-bottom: 20px;
}
.footer-link {
margin: 0 10px;
color: var(--text-dark);
text-decoration: none;
}
.social-icons {
display: flex;
justify-content: center;
gap: 15px;
}
.social-icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: translateY(-3px);
}
/* Responsive */
@media (max-width: 768px) {
.title {
font-size: 2rem;
}
.input-section, .results-section, .chart-section {
padding: 20px;
}
.chart-controls {
flex-direction: column;
gap: 15px;
}
.header-visual {
display: none;
}
}
/* Animated graph icon */
.graph-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
.graph-line {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: drawLine 2s forwards, pulseColor 3s infinite 2s;
}
@keyframes drawLine {
to {
stroke-dashoffset: 0;
}
}
@keyframes pulseColor {
0% { stroke: var(--primary-gradient-start); }
50% { stroke: var(--primary-gradient-end); }
100% { stroke: var(--primary-gradient-start); }
}
/* Pie chart icon */
.pie-chart-container {
display: flex;
justify-content: center;
margin: 20px 0;
}
.pie-chart {
width: 100px;
height: 100px;
border-radius: 50%;
background: conic-gradient(
var(--primary-gradient-end) 0% var(--returns-percentage),
var(--primary-gradient-start) var(--returns-percentage) 100%
);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.pie-legend {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 10px;
font-size: 0.8rem;
}
.legend-item {
display: flex;
align-items: center;
}
.legend-color {
width: 12px;
height: 12px;
border-radius: 2px;
margin-right: 5px;
}
.legend-invested {
background-color: var(--primary-gradient-start);
}
.legend-returns {
background-color: var(--primary-gradient-end);
}
Mutual Fund SIP Calculator
Plan Your Investments Smartly. Calculate Your Future Wealth!
Monthly Investment
Enter your monthly SIP amount.
Investment Duration (Years)
How long will you invest?
Expected Annual Return (%)
Expected rate of return (historical average: 10–15%).
Step-Up SIP (Optional)
Annual Increase (%)
Increase SIP amount yearly?
Your Investment Results
Total Invested Amount
₹6,00,000
Estimated Returns
₹5,42,410
Total Value
₹11,42,410
Invested Amount
Returns
Recalculate
Wealth Growth Projection
Cumulative Returns
Yearly Breakdown
Export Chart
Frequently Asked Questions
What is SIP? +
SIP or Systematic Investment Plan is an investment vehicle offered by mutual funds. It allows investors to invest a fixed amount at regular intervals (typically monthly) instead of making a lump-sum investment.
How are returns calculated? +
Returns are calculated using the compound interest formula for each monthly investment over the investment period. The calculation accounts for the time value of money, considering that each SIP installment is invested for a different period.
What is Step-up SIP? +
Step-up SIP allows you to increase your SIP amount periodically (usually annually) by a fixed percentage. This helps you invest more as your income increases over time, potentially generating higher returns.
Is this calculator accurate? +
This calculator provides estimates based on the information you provide. Actual results may vary due to market fluctuations, variations in returns, and other factors. It's advisable to consult with a financial advisor before making investment decisions.
Benefits of SIP
Power of Compounding: Your returns earn returns, accelerating wealth creation over time.
Rupee Cost Averaging: Buy more units when prices are low and fewer when prices are high, reducing the impact of market volatility.
Financial Discipline: Regular investments instill savings habits and financial discipline.
Flexibility: Start with a small amount and modify, stop, or resume as per your financial situation.
Start Investing Now
Mutual fund investments are subject to market risks. Read all scheme related documents carefully before investing. Past performance is not indicative of future returns.
Privacy Policy
Terms & Conditions
Contact Us
Enter fullscreen mode
Exit fullscreen mode