How to Create Fade-in Effect on Page Load using CSS?

Last Updated : 18 Jun, 2025

To create a fade-in effect on page load using CSS, apply the opacity property in conjunction with the transition property to smoothly change the element's opacity from 0 to 1.

opacity Property: Sets the transparency level of an element, with 0 being fully transparent and 1 fully opaque.
transition Property: Enables smooth changes between property values over a specified duration.

index.html

<html >
<head>
    <style>
        body {
            opacity: 0;
            animation: fadeIn 2s forwards;
        }
        @keyframes fadeIn {
            to {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This content will fade in on page load.</p>
</body>
</html>

Code Overview

Initial Opacity: The body element starts with opacity: 0;, making it fully transparent.
Animation Definition: The fadeIn animation is defined using @keyframes, transitioning the opacity to 1.
Applying the Animation: The animation property on the body sets the duration to 2 seconds and uses forwards to retain the final state.

Using CSS animation property

To create a fade-in effect using the CSS animation property, define keyframes with opacity settings (0 and 1) and apply the animation to the target element.

Use @keyframes to define the animation steps for opacity.
Apply animation with properties like duration, ease, and fill mode to control the effect.

index.html

<html>
<head>
    <style>
        body {
            animation: fadeInAnimation ease 3s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <b>
        How to create fade-in effect
        on page load using CSS
    </b>
    <p>
        This page will fade in
        after loading
    </p>
</body>
</html>

Using transition Property

To implement a fade-in effect on page load using the CSS transition property, set the initial opacity of the body to 0 and adjust it to 1 upon loading.