CSS text shadow Archives - csshint - A designer hub https://csshint.com/tag/css-text-shadow/ Mon, 17 Jul 2023 16:45:10 +0000 en-US hourly 1 https://wordpress.org/?v=6.3.4 How to Create Embossed Text Effect using CSS https://csshint.com/how-to-create-embossed-text-effect-using-css/ Mon, 17 Jul 2023 16:42:59 +0000 https://csshint.com/?p=8399 In this article we are going to learn How to create Embossed Text Effect using HTML and CSS. We will use the CSS text-shadow property to get the desired output. Let’s explore how to accomplish this. HTML Code <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Embossed Text Effect</title> </head> <body> <div class="wrap"> <h2>CSSHINT</h2> </div> […]

The post How to Create Embossed Text Effect using CSS appeared first on csshint - A designer hub.

]]> In this article we are going to learn How to create Embossed Text Effect using HTML and CSS. We will use the CSS text-shadow property to get the desired output. Let’s explore how to accomplish this.

HTML Code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>Embossed Text Effect</title>
</head>
  
<body>
    <div class="wrap">
        <h2>CSSHINT</h2>
    </div>
</body>
  
</html>

CSS Code

/* embed google font what ever you want to add */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

body{
  color: #4e4e4e;
   font-family: poppins;
   margin: 0px;
  padding: 0px;
  background: rgba(0,45,128,0.8);
  font-weight: 700;
}

.wrap h2{
  font-size: 8rem;
  text-align:center;
  line-height:1;
  text-transform:uppercase;
  text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.2), 3px -1px 0 rgba(255, 255, 255, 0.5);
    color: rgba(0,45,128,0.8);
}

 

Output

Embossed Text Effect using CSS


I Hope you enjoyed this post. you can use this html css code and recreate embossed text effect in your next web design project. Thanks

The post How to Create Embossed Text Effect using CSS appeared first on csshint - A designer hub.

]]> 15 CSS text shadow effects https://csshint.com/15-css-text-shadow-effects/ Sat, 08 Aug 2020 05:56:53 +0000 http://csshint.com/?p=3167 Latest Collection of hand-picked free HTML CSS text shadow effects code examples. demo and download Zip. 1. 3D Cartoon Text w/CSS text-shadow Author Fielding Johnston Made with HTML / CSS demo and code Get Hosting 2. SCSS 3D text mixin Author Liam Egan Made with HTML / CSS (SCSS) demo and code Get Hosting 3. […]

The post 15 CSS text shadow effects appeared first on csshint - A designer hub.

]]> Latest Collection of hand-picked free HTML CSS text shadow effects code examples. demo and download Zip.

1. 3D Cartoon Text w/CSS text-shadow

3D Cartoon Text CSS text-shadow

3D Cartoon Text CSS text-shadow


Author

  • Fielding Johnston

Made with

  • HTML / CSS

demo and code Get Hosting

2. SCSS 3D text mixin

SCSS 3D text mixin

SCSS 3D text mixin


Author

  • Liam Egan

Made with

  • HTML / CSS (SCSS)

demo and code Get Hosting

3. Netflix style text animation with CSS

text animation with CSS

text animation with CSS


Author

  • Nooray Yemon

Made with

  • HTML (Slim) / CSS (SCSS)

demo and code Get Hosting

4. Direction-aware text-shadow

Animated text-shadow

Animated text-shadow


Author

  • Martin Picod

Made with

  • HTML / CSS (SCSS) / JavaScript

demo and code Get Hosting

5. Animated Text-Shadow

Author

  • Erin E. Sullivan

Made with

  • HTML / CSS

demo and code Get Hosting

6. Groovy CSS Effect

Author

  • Daniel Gonzalez

Made with

  • HTML (Pug) / CSS (SCSS)

demo and code Get Hosting

7. Pretty shadow

Author

  • Alex Moore

Made with

  • HTML / CSS (SCSS)

demo and code Get Hosting

8. Fancy text shadow

Author

  • agathaco

Made with

  • HTML (Pug) / CSS (SCSS)

demo and code Get Hosting

9. Variable Longshadow with Gradients Mixin

Author

  • Dario Corsi

Made with

  • HTML / CSS (SCSS)

demo and code Get Hosting

10. Neon text-shadow effect

Author

  • Erik Jung

Made with

  • HTML / CSS / JavaScript

demo and code Get Hosting

11. Long Shadow Gradient Mixin

Author

  • roikles

Made with

  • HTML / CSS (SCSS)

demo and code Get Hosting

12. Text-Shadow

Author

  • Mayur Elbhar

Made with

  • HTML / CSS

demo and code Get Hosting

13. Awesome Text-Shadow

Awesome Text-Shadow

Demo : Awesome Text-Shadow


Author

  • Nguyen Hoang Nam

Made with

  • HTML / CSS

demo and code Get Hosting

14. CSS3 text-shadow effects

Author

  • Jorge Epuñan

Made with

  • HTML (Haml) / CSS (Less)

demo and code Get Hosting

15. text-shadow

Author

  • IMarty

Made with

  • HTML / CSS (Scss)

demo and code Get Hosting

The post 15 CSS text shadow effects appeared first on csshint - A designer hub.

]]>