23+ CSS Reveal Animations

A curated collection of visually stunning 23+ HTML and CSS reveal animation code snippets for web designers, front-end developers, and UX/UI designers. Build eye-catching CSS animations at absolutely no cost!

1. Smoke Reveal Effect

See the Pen <a href="https://codepen.io/mephysto/pen/yajVEW"> Smoke Reveal Effect</a> by Maurice Melchers (<a href="https://codepen.io/mephysto">@mephysto</a>) on <a href="https://codepen.io">CodePen</a>.

Author: Maurice Melchers
Source: Code / Demo
Created on: OCTOBER 11, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(SCSS), JavaScript(Babel)

2. CSS Reveal animation text and image

See the Pen <a href="https://codepen.io/antho-fsy/pen/wJqWKj"> CSS Reveal animation text and image</a> by Anthony Fessy (<a href="https://codepen.io/antho-fsy">@antho-fsy</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Anthony Fessy
Source: Code / Demo
Created on: MARCH 14, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

3. Reveal Effect

See the Pen <a href="https://codepen.io/leenalavanya/pen/XdrOzg"> Reveal Effect</a> by Leena Lavanya (<a href="https://codepen.io/leenalavanya">@leenalavanya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Leena Lavanya
Source: Code / Demo
Created on: FEBRUARY 26, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

4. Page Reveal Effect

See the Pen <a href="https://codepen.io/soju22/pen/zbjNWy"> Page Reveal Effect</a> by Kevin Levron (<a href="https://codepen.io/soju22">@soju22</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kevin Levron
Source: Code / Demo
Created on: MARCH 16, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript(Babel)

5. Reveal Form Fields as Needed with CSS :checked

See the Pen <a href="https://codepen.io/chriscoyier/pen/LEGXOK"> Reveal Form Fields as Needed with CSS :checked</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chris Coyier
Source: Code / Demo
Created on: DECEMBER 9, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

6. “Scribble” Image Reveal with SVG & Blend Modes

See the Pen <a href="https://codepen.io/dudleystorey/pen/VLNYXa"> “Scribble” Image Reveal with SVG & Blend Modes</a> by Dudley Storey (<a href="https://codepen.io/dudleystorey">@dudleystorey</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dudley Storey
Source: Code / Demo
Created on: OCTOBER 14, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Close the Blinds

See the Pen <a href="https://codepen.io/chancesq/pen/mdejYeQ"> Close the blinds</a> by Chance Squires (<a href="https://codepen.io/chancesq">@chancesq</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chance Squires
Source: Code / Demo
Created on: MAY 14, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

8. Pure CSS Glitchy Text Reveal

See the Pen <a href="https://codepen.io/jh3y/pen/GRgZrVO"> Pure CSS Glitchy Text Reveal 😎</a> by Jhey (<a href="https://codepen.io/jh3y">@jh3y</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: JHEY
Source: Code / Demo
Created on: DECEMBER 11, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Circular Reveal

See the Pen <a href="https://codepen.io/frxnz/pen/nBjrZY"> Circular Reveal</a> by Derek Wheelden (<a href="https://codepen.io/frxnz">@frxnz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Derek Wheelden
Source: Code / Demo
Created on: FEBRUARY 18, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Hide/Reveal Useful Info – Pure CSS

See the Pen <a href="https://codepen.io/josetxu/pen/mdRgPLM"> Hide/Reveal Useful Info – Pure CSS</a> by Josetxu (<a href="https://codepen.io/josetxu">@josetxu</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Josetxu
Source: Code / Demo
Created on: APRIL 14, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. Image Reveal – Noise

See the Pen <a href="https://codepen.io/samritha/pen/ExwdpNR"> Image reveal – noise</a> by Samritha S (<a href="https://codepen.io/samritha">@samritha</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Samritha S
Source: Code / Demo
Created on: JANUARY 11, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Block Reveal Effect

See the Pen <a href="https://codepen.io/Zugzwang10/pen/xaoMoY"> Block Reveal Effect</a> by Dmitrij (<a href="https://codepen.io/Zugzwang10">@Zugzwang10</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: DDmitrij
Source: Code / Demo
Created on: OCTOBER 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

13. Reveal Animation

See the Pen <a href="https://codepen.io/aniketkudale/pen/qBdaWdQ"> Reveal Animation</a> by Aniket Kudale (<a href="https://codepen.io/aniketkudale">@aniketkudale</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aniket Kudale
Source: Code / Demo
Created on: FEBRUARY 19, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

14. Text Reveal on Hover: Flip Down

See the Pen <a href="https://codepen.io/davidleininger/pen/ndWQZZ"> Text Reveal on Hover: Flip Down</a> by David Leininger (<a href="https://codepen.io/davidleininger">@davidleininger</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: David Leininger
Source: Code / Demo
Created on: JUNE 25, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Block Reveal Effect HTML and CSS

See the Pen <a href="https://codepen.io/nirazanbasnet/pen/LKqKeZ"> Block Reveal Effect HTML and CSS</a> by Nirajan Basnet (<a href="https://codepen.io/nirazanbasnet">@nirazanbasnet</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nirajan Basnet
Source: Code / Demo
Created on: JULY 11, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Pure CSS Text Reveal

See the Pen <a href="https://codepen.io/equinusocio/pen/KNYOxJ"> Pure CSS Text Reveal</a> by Mattia Astorino (<a href="https://codepen.io/equinusocio">@equinusocio</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mattia Astorino
Source: Code / Demo
Created on: JULY 03, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. 3D CSS Spoiler Reveal

See the Pen <a href="https://codepen.io/coder787/pen/ZELPaXB"> 3D CSS Spoiler Reveal</a> by coder787 (<a href="https://codepen.io/coder787">@coder787</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: coder787
Source: Code / Demo
Created on: APRIL 29, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Pure CSS side reveal effect

See the Pen <a href="https://codepen.io/tonkec/pen/Ogzpqz"> Pure CSS side reveal effect</a> by Antonija Šimić (<a href="https://codepen.io/tonkec">@tonkec</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Antonija Šimić
Source: Code / Demo
Created on: JUNE 28, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. Dummy Multi Layer Page Reveal Effect

See the Pen <a href="https://codepen.io/mburakerman/pen/roJmaZ"> Dummy Multi Layer Page Reveal Effect</a> by Mehmet Burak Erman (<a href="https://codepen.io/mburakerman">@mburakerman</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mehmet Burak Erman
Source: Code / Demo
Created on: JANUARY 3, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Stylus), JavaScript

20. Text Split and Reveal Animation

See the Pen <a href="https://codepen.io/RitikaAgrawal08/pen/ExmrRzj"> Text Split and Reveal Animation</a> by Ritika Agrawal (<a href="https://codepen.io/RitikaAgrawal08">@RitikaAgrawal08</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ritika Agrawal
Source: Code / Demo
Created on: AUGUST 12, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

21. Hero Image Reveal

See the Pen <a href="https://codepen.io/CiTA/pen/OJxRMRb"> Hero Image Reveal</a> by Silvestar Bistrović (<a href="https://codepen.io/CiTA">@CiTA</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Silvestar Bistrović
Source: Code / Demo
Created on: DECEMBER 10, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Text Clip Heading Reveal

See the Pen <a href="https://codepen.io/ZachSaucier/pen/RwVdEJO"> Text clip heading reveal</a> by Zach Saucier (<a href="https://codepen.io/ZachSaucier">@ZachSaucier</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Zach Saucier
Source: Code / Demo
Created on: OCTOBER 14, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. CSS Block Revealing Effect

See the Pen <a href="https://codepen.io/AbubakerSaeed/pen/abzWqPb"> CSS Block Revealing Effect</a> by Abubaker Saeed (<a href="https://codepen.io/AbubakerSaeed">@AbubakerSaeed</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Abubaker Saeed
Source: Code / Demo
Created on: DECEMBER 23, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Hover Reveal Effect

See the Pen <a href="https://codepen.io/tstoik/pen/PZJjpz"> Hover Reveal Effect</a> by Tiffany Stoik (<a href="https://codepen.io/tstoik">@tstoik</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tiffany Stoik
Source: Code / Demo
Created on: JANUARY 16, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS