Skip to content

25+ Creating Stunning CSS Text Shadows for Your Website

    The CSS text-shadow the property adds a shadow effect to the text. It takes values for the horizontal offset, vertical offset, blur radius, and shadow color. Example:

    h1 {
      text-shadow: 2px 2px 2px red;
    }

    In this example, the text-shadow the property adds a 2px horizontal shadow 2px to the right, a 2px vertical shadow 2px down, and a 2px blurred shadow with a Red color to the text within an h1 element.

    See the Pen CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo) on CodePen.

    Title:- CSS3 text-shadow effects
    Author:- Jorge Epuñan
    Made With:- HTML CSS


    See the Pen Masked Text-Shadow by Daniel Riemer (@zitrusfrisch) on CodePen.

    Title:- Masked Text-Shadow
    Author:- Daniel Riemer
    Made With:- HTML CSS


    See the Pen Neon Glow by Felix Rilling (@FelixRilling) on CodePen.

    Title:- Neon Glow
    Author:- Felix Rilling
    Made With:- HTML CSS


    See the Pen [webkit] Animated “text-shadow” pattern by carpe numidium (@carpenumidium) on CodePen.

    Title:- [webkit] Animated “text-shadow” pattern
    Author:- carpe numidium
    Made With:- HTML CSS


    See the Pen Pure CSS Flip Card by Aron (@Aoyue) on CodePen.

    Title:- Pure CSS Flip Card
    Author:- Aron
    Made With:- HTML CSS


    See the Pen Long shadow generator by Max Kohler (@maxakohler) on CodePen.

    Title:- Long shadow generator
    Author:- Max Kohler
    Made With:- HTML CSS


    See the Pen Netflix style text animation with CSS by Nooray Yemon (@yemon) on CodePen.

    Title:- Netflix style text animation with CSS
    Author:- Nooray Yemon
    Made With:- HTML CSS


    See the Pen Awesome Text-Shadow by Nguyen Hoang Nam (@namho) on CodePen.

    Title:- Awesome Text-Shadow
    Author:- Nguyen Hoang Nam
    Made With:- HTML CSS


    See the Pen A collection of CSS text-shadow and pattern effects by Ashley Watson-Nolan (@ashleynolan) on CodePen.

    Title:- A collection of CSS text-shadow and pattern effects
    Author:- Ashley Watson-Nolan
    Made With:- HTML CSS


    See the Pen CSS3 text-shadow by Tommy McDonald (@tommymcdonald) on CodePen.

    Title:- CSS3 text-shadow
    Author:- Tommy McDonald
    Made With:- HTML CSS


    See the Pen Neon text-shadow effect by Erik Jung (@erikjung) on CodePen.

    Title:- Neon text-shadow effect
    Author:- Erik Jung
    Made With:- HTML CSS


    See the Pen Animated Fire Text-Shadow by Antti Nyman (@atnyman) on CodePen.

    Title:- Animated Fire Text-Shadow
    Author:- Antti Nyman
    Made With:- HTML CSS


    See the Pen Layered text-shadow effect CSS by Shireen (@TajShireen) on CodePen.

    Title:- Layered text-shadow effect CSS
    Author:- Shireen
    Made With:- HTML CSS


    See the Pen Complex Text Shadow Examples by Chris Coyier (@chriscoyier) on CodePen.

    Title:- Complex Text Shadow Examples
    Author:- Chris Coyier
    Made With:- HTML CSS


    See the Pen Long Shadow Gradient Mixin by roikles (@roikles) on CodePen.

    Title:- Long Shadow Gradient Mixin
    Author:- roikles
    Made With:- HTML CSS


    See the Pen 3D CSS Typography by Noah Blon (@noahblon) on CodePen.

    Title:- 3D CSS Typography
    Author:- Noah Blon
    Made With:- HTML CSS


    See the Pen Animated Text-Shadow by Erin E. Sullivan (@erinesullivan) on CodePen.

    Title:- Animated Text-Shadow
    Author:- Erin E. Sullivan
    Made With:- HTML CSS


    See the Pen text-shadow by IMarty (@IMarty) on CodePen.

    Title:- text-shadow
    Author:- IMarty
    Made With:- HTML CSS


    See the Pen Text-Shadow Animate by Wyatt Nolen (@wyattnolen) on CodePen.

    Title:- Text-Shadow Animate
    Author:- Wyatt Nolen
    Made With:- HTML CSS


    See the Pen Mega Shadow Text by Bennett Feely (@bennettfeely) on CodePen.

    Title:- Mega Shadow Text
    Author:- Bennett Feely
    Made With:- HTML CSS


    See the Pen CSS only Variable font demo using Decovar Regular by Mandy Michael (@mandymichael) on CodePen.

    Title:- CSS only Variable font demo using Decovar Regular
    Author:- Mandy Michael
    Made With:- HTML CSS


    See the Pen Popout Text with Background Image Shadow by Mark Mead (@markmead) on CodePen.

    Title:- Popout Text with Background Image Shadow
    Author:- Mark Mead
    Made With:- HTML CSS


    See the Pen Text Shadow Compilation by emma (@boltaway) on CodePen.

    Title:- Text Shadow Compilation
    Author:- emma
    Made With:- HTML CSS


    See the Pen Text shadows by Artem N (@aann) on CodePen.

    Title:- Text shadows
    Author:- Artem N
    Made With:- HTML CSS


    See the Pen Flickering Neon Sign Effect using CSS Text & Box Shadow by George W. Park (@GeorgePark) on CodePen.

    Title:- Flickering Neon Sign Effect using CSS Text & Box Shadow
    Author:- George W. Park
    Made With:- HTML CSS


    See the Pen 3D CSS/JS dynamic shadow by Marc López (@Loopez10) on CodePen.

    Title:- 3D CSS/JS dynamic shadow
    Author:- Marc López
    Made With:- HTML CSS JAVASCRIPT


    See the Pen 3D effect with shadows by zastrow (@zastrow) on CodePen.

    Title:- 3D effect with shadows
    Author:- zastrow
    Made With:- HTML CSS


    See the Pen Text shadows Click & drag by Danny Joris (@DannyJoris) on CodePen.

    Title:- Text shadows Click & drag
    Author:- Danny Joris
    Made With:- HTML CSS JAVASCRIPT


    Leave a Reply

    Your email address will not be published. Required fields are marked *