24 CSS Text Shadow Effects

About a code

Bigger Font Size, Bigger Text Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Outlined Text Shadow with Fallback

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Text Shadow Effect

A CSS text background shadow effect using the content attribute.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Funky Retro Text Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

SAVE

Quirky CSS banner using box-shadows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Popout Text With Background Image Shadow

Cutting out text from a background and then having it "popout" similar to how text shadow can be used. In fact, this does make use of text shadow!

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

3D Cartoon Text with CSS text-shadow

Playing around with CSS text-shadow and the Google Font "Luckiest Guy".

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

SCSS 3D Text Mixin

This is a simple SCSS mixin that creates 3D blocky looking text with text-shadows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Animated text-shadow

A fun, CSS animation that creates a bounce while mimicking an RGB separation during the process.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Direction-Aware text-shadow

Direction-aware text-shadow, use of CSS variables to create perspective and 3D light effect on text.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Groovy CSS Effect

1960's font effect using CSS text-shadow property along with SASS function and mixins to keep code DRY.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Netflix Style Text Animation with CSS

Netflix style text animation with CSS and a SCSS function to have the long text shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Fancy Text Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS text-shadow

Modern shadow effect for text with CSS text-shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Pretty Shadow

Pretty text shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Variable Longshadow with Gradients Mixin

This doesn't need to exist. But now you can define long shadows with different colors and spreads with one Sass mixin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Neon Effects

Neon text-shadow effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About a code

Pinchy Type with CSS text-shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Awesome text-shadow

Flat and simple text shadow effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Text-Shadow

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Long Shadow Gradient Mixin

A Sass (SCSS) mixin to quickly generate long shadow gradients. Suitable for both text-shadow and box-shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS3 text-shadow Effects

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS Dashed Shadow

Pure CSS hipster-ish typographic dashed shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -