Ask any question about CSS here... and get an instant response.
Post this Question & Answer:
How can I create a smooth fade-in effect using CSS transitions?
Asked on May 18, 2026
Answer
To create a smooth fade-in effect using CSS transitions, you can utilize the `opacity` property along with the `transition` property. This allows an element to gradually change its opacity from 0 (invisible) to 1 (fully visible) over a specified duration.
<!-- BEGIN COPY / PASTE -->
<style>
.fade-in {
opacity: 0;
transition: opacity 2s ease-in-out;
}
.fade-in.visible {
opacity: 1;
}
</style>
<div class="fade-in" id="myElement">Hello, World!</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("myElement").classList.add("visible");
});
</script>
<!-- END COPY / PASTE -->Additional Comment:
- The `transition` property specifies the duration and timing function for the fade-in effect.
- Initially, the element is set to `opacity: 0` to be invisible.
- Adding the `visible` class changes the opacity to 1, triggering the transition.
- The JavaScript snippet ensures the class is added after the page loads, starting the fade-in effect.
Recommended Links:
