Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I use CSS to create a smooth fade-in effect on page load?
Asked on Jan 25, 2026
Answer
To create a smooth fade-in effect on page load using CSS, you can utilize the `opacity` property along with CSS transitions. By setting the initial opacity to 0 and then transitioning it to 1, you achieve a fade-in effect.
<!-- BEGIN COPY / PASTE -->
<style>
.fade-in {
opacity: 0;
transition: opacity 2s ease-in;
}
.fade-in.show {
opacity: 1;
}
</style>
<div class="fade-in" id="content">
This content will fade in on page load.
</div>
<script>
window.addEventListener('load', function() {
document.getElementById('content').classList.add('show');
});
</script>
<!-- END COPY / PASTE -->Additional Comment:
- The `.fade-in` class sets the initial opacity to 0 and defines a transition for the opacity property.
- The `.show` class changes the opacity to 1, triggering the transition.
- JavaScript is used to add the `.show` class after the page has fully loaded.
- Adjust the `transition` duration and timing function as needed for different effects.
Recommended Links:
