10+ CSS text effects (latest collection)

CSS | Updated on
Latest & unique collection of hand-picked free HTML and CSS text effects examples with codes. Updated on April 2022
Editor
hover to play
Author Tobias
Demo & Code
Tech used HTML / CSS / JS
What is this?

Terminal Text Effect

css text animation effects codepen, css text transition effects examples, css text effects css tricks

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Html5andblog
Demo & Code
Tech used HTML / CSS / JS
What is this?

Bubbling Text Effect

css text animation effects codepen, css3 text animation effects example codepen, css text effects css tricks

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Lucas Bebber
Demo & Code
Tech used HTML / CSS (Stylus)
What is this?

Wave text effect (with SVG/blend mode)

css3 text animation effects example codepen, css text transition effects examples, pure css text effect

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Jonny Scholes
Demo & Code
Tech used HTML / CSS (SCSS)
What is this?

In/out of focus text effect

css text glow effect animation, css highlight text effect codepen, text transition effects css codepen

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Giana
Demo & Code
Tech used HTML / CSS (SCSS) / JS
What is this?

CSS-only shimmering neon text

css3 text animation effects example codepen, css highlight text effect codepen

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Robert Borghesi
Demo & Code
Tech used HTML / CSS (SCSS) / JS
What is this?

Text-mask background moving on MouseMove – v2

css text hover animation effects, css text hover transition effects codepen, html css text hover effects

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Rachel Smith
Demo & Code
Tech used HTML / CSS / JS
What is this?

Rotating text

css highlight text effect codepen, text transition effects css codepen, html css text effect

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Dimitra Vasilopoulou
Demo & Code
Tech used HTML / CSS
What is this?

Silent Movie Text Effect

css text effects css tricks codepen, css3 text animation effects example codepen

  • Browser Compalibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Mandy Michael
Demo & Code
Tech used HTML / CSS (SCSS) / JS
What is this?

CSS only Frozen text

css text transition effects examples, css text effects css tricks, cool css text effect

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No
hover to play
Author Claire Larsen
Demo & Code
Tech used HTML / CSS
What is this?

Text Animation: Montserrat

css text animation effects codepen, cool css text effect, css3 text animation effects example codepen

  • browsers-compatibility: Chrome, Edge, Firefox, Opera, Safari
  • Responsive: Yes
  • Dependencies: No

Subscribe to our Youtube channel for regular tutorial videos on WordPress, Elementor, Web Design & Development, Website & Social Media strategies, etc. We also recommend you to check this “Essential Website Features” article to create a better website.

Hooray! Our FREE Figma UI UX design course has been released

Try it
X