Collection of free HTML and CSS text effect code examples: 3D, animated, background, glitch, hover, shadow, rotating, typing, etc

Welcome to our collection of CSS examples! In this carefully curated compilation, we have gathered a wide array of CSS code snippets that demonstrate the power and versatility of Cascading Style Sheets.

Single div CSS Cube

Single div CSS Cube

Author:
Lynn Fisher | October 24, 2022
Made with:
HTML / CSS (Stylus)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Sliced Text Effect

Sliced Text Effect

Author:
Shireen Taj | September 16, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

CSS-Only Text Shader

Author:
Robb Owen | July 7, 2022
Made with:
HTML / CSS / JS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Lightning Text Skew Idea

Lightning Text Skew Idea

Author:
Tom Hermans | June 13, 2022
Made with:
HTML / CSS (SCSS)

About a code

A bit inspired by old comics.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

3D Paper Text

Author:
G'Mariem | June 9, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
A.

A.

Author:
Dan Wilson | June 2, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Word Underline with CSS & clip-path

Word Underline with CSS & clip-path

Author:
Jhey | June 1, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
font-palette

font-palette

Author:
Ollie Williams | May 9, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Variable Fonts Hover Effect

Author:
Dusko Stamenic | April 21, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
background-image for Text

background-image for Text

Author:
Nils Binder | April 12, 2022
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Pseudo Element for Fancy text-decoration

Pseudo Element for Fancy text-decoration

Author:
Nils Binder | April 12, 2022
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Simple Unexpected Hover Effect

Author:
Noah Raskin | March 19, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Reflections with CSS

Reflections with CSS

Author:
Preethi Sam | February 25, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Highlight Text

Author:
NANOUU | January 25, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

CSS Stretchy Heading

Author:
S. Shahriar | January 13, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Sweet Stuff

Sweet Stuff

Author:
Mireille Tijdeman | December 22, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Butter

Butter

Author:
NANOUU | December 1, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Knockout Text

Knockout Text

Author:
Krisztina Kovari | November 16, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Text Shadow

Text Shadow

Author:
Richard Stanley | November 3, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Text-Shadow

Author:
Temani Afif | November 2, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Text Shadow

Text Shadow

Author:
lChap701 | November 1, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
Pure CSS Animated 3D Text Effect and Fade In As Outline Text Effect

Pure CSS Animated 3D Text Effect and Fade In As Outline Text Effect

Author:
rohzart | November 1, 2021
Made with:
HTML / CSS

About a code

Pure CSS animated 3D text effect and a fade in as outline text effect. All implemented by leveraging text-shadows CSS property.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-
CSS Paper Cut-out Effect

CSS Paper Cut-out Effect

Author:
Smashing Magazine | October 12, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Lightness

Author:
Kai | September 24, 2021
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Cool Spotlight Shadows

Author:
Ryan Mulligan | September 18, 2021
Made with:
HTML (Pug) / CSS

About a code

Backlit spotlight text casting long shadows.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨