By · Updated

CSS Fade In Generator

Fade In Animation on Page Load

No ratings yet

4 Fade-In Generator presets to start from

OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.

How the Fade-In Generator works

A CSS fade in makes an element start invisible and ease up to full opacity, usually as the page loads. Set the duration, delay, easing and an optional starting blur, press Replay to watch it, and copy the class and keyframes.

A gentle fade softens the moment content appears, so a page feels finished rather than popping in piece by piece. It works well on hero headings, images and modal content.

How the css fade in works

The .fade-in class runs a keyframe animation from opacity: 0 to opacity: 1. The both fill mode keeps the element hidden during any delay and holds the final state afterwards, so there is no flash of content before the animation starts. Adding a blur makes the element sharpen as it appears, which reads as a softer, more cinematic entrance.

Reduced motion

Visitors who ask their system for less motion get the element shown straight away. A fade is mild, but blur and long delays can still bother some people, so the fallback is included by default.

FAQ

How do I fade in several elements one after another?

Add the class to each element and give each a slightly longer animation-delay, for example 0, 100 and 200 milliseconds. The staggered animation builder writes that pattern for a whole list at once.

Why does my element flash before fading in?

The flash happens when the animation has a delay but no backwards fill, so the element shows at full opacity until the delay ends. The generated code uses both, which applies the first keyframe during the delay and removes the flash.

Can I fade in an element when it scrolls into view instead?

Yes. A load animation plays once when the page opens, even for content far below the fold. For content further down, use the scroll animation tool, which waits until the element is visible before fading it in.

Does a fade-in hurt page speed or SEO?

Opacity is animated on the graphics card and does not trigger layout, so it is cheap. Keep the delay short on your main heading though, because a long hidden period can delay when the largest content element counts as painted.

See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.

Related tools

Scroll Animation

Preview scroll reveal effects and copy the CSS or JS.

Reading Progress Bar

Make a scroll progress bar for articles and copy the CSS and JS.

Slide-In Generator

Generate a CSS slide in animation from any side.

Logo Reveal

Animate a wordmark reveal and copy the CSS.

Hover Card Builder

Card hover effects with timing controls, previewed live.