{"id":3792,"date":"2015-04-23T12:15:18","date_gmt":"2015-04-23T09:15:18","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=3792"},"modified":"2018-01-09T09:14:28","modified_gmt":"2018-01-09T07:14:28","slug":"css-text-shadow-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/","title":{"rendered":"CSS Text Shadow Example"},"content":{"rendered":"

Ever felt chaotic about text going into unsuitable button colors, boxes or simply sitting inside a bad contrast in the page? <\/p>\n

Well, it’s probably because you’ve used colors that won’t match to give a good view of the text, (e.g make it readable).<\/p>\n

With CSS, it is very easy to solve this using the text-shadow<\/code> property to enhance the text readability and contrast.<\/p>\n

In this example, we’re going to use text shadows in some really essential cases which will later enable you to explore more.
\n 
\n 
\n[ulp id=’nAkUl5IbAjqlXSla’]<\/p>\n

1. Basic Set Up<\/h2>\n

First, go ahead and create a new html file and add the basic html<\/code> and css<\/code> like this:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>CSS Buttons<\/title>\r\n<\/head>\r\n<body>\r\n\r\n\t<!-- STYLE SECTION -->\r\n\r\n\t<style type=\"text\/css\">\r\n\r\n  \t<\/style>\r\n\r\n\r\n\t<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
On the html section, add a <h1><\/code> tag with a class of text<\/code> like so:<\/p>\n
\r\n\t<!-- HTML SECTION -->\r\n\r\n\t<h1 class=\"text\">Web Code Geeks<\/h1>\r\n<\/pre>\n
And this is the element we will be adding shadow on.<\/p>\n
I have given this element some initial properties to make it look good on the screen:<\/p>\n
\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\nbody{\r\n\tfont-family: \"Arial\", \"sans-serif\";          \/* just a custom font *\/  \r\n}\r\n\r\nh1 {                                \/* centered the text for a better view *\/\r\n\tmargin-left: 7em;\r\n\tmargin-top: 5em;\r\n}\r\n<\/style>\r\n\r\n<\/pre>\n
Now let’s give the text the text-shadow attribute.<\/p>\n
Before doing that, let us explain what are the inputs of this attribute:<\/p>\n
text-shadow: 4px 4px 4px #ccc;<\/pre>\n
4px<\/code> –  X (horizontal) offset
\n3px<\/code> –  Y (vertical offset
\n2px<\/code> –  blur amount
\n#ccc<\/code> – color<\/p>\n
Basically, you can see it like this:<\/p>\n
text-shadow: horizontal-offset vertical-offset blur color;<\/pre>\n
where the color can be either in hex<\/code> #ccc;<\/code> code or rgba(0,0,0,0.3);<\/code> code.<\/p>\n
Applying the shadow to our text in css would look like this:<\/p>\n
\r\n<!-- STYLE SECTION -->\r\n\r\n.text {\r\n\tfont-size: 5em; \t\t\t\t\t          \/* just made text larger *\/\r\n\ttext-shadow: 4px 3px 2px #ccc;\r\n}\r\n\r\n<\/pre>\n
The view in the browser of this text with shadow would be:
\n
\"Basic<\/a>
Basic Shadow Applied<\/figcaption><\/figure><\/p>\n
<\/p>\n
2. Variations <\/h2>\n
From now on, the body<\/code> background color will be subject to constant change.<\/p>\n
This is because certain shadows need specific backgrounds to be noticed.<\/p>\n
Also the text is going to be uppercase for better results.<\/p>\n
The following will show some great text-shadows you can apply.<\/p>\n
2.1 Pressed Effect<\/h3>\n
Set your text color to a slightly darker shade than your background color. <\/p>\n
Next, apply a slight white text-shadow with a reduced opacity.<\/p>\n
\r\nbody {\r\n\tbackground: #222;\r\n}\r\n\r\n.text {\r\n\tfont-size: 5em; \t\t\t\t\t\r\n\tcolor: rgba(0,0,0,0.6);\t\t\t\t\t\t\t\t\/* added text-color *\/\r\n    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);\t\t\/* added shadow *\/\r\n}\r\n<\/pre>\n
Using the rgba<\/code> color code, you will be able to set the opacity<\/code> of the color applied.<\/p>\n
Notice that the text-color has an opacity of 60% (0.6) and shadow 10% (0.1).
\n
\"Letterpress<\/a>
Letterpress Shadow Effect<\/figcaption><\/figure><\/p>\n
2.2 Hard Shadow Effect<\/h3>\n
Because of their retro nature, hard shadows don’t always need to have blur applied.<\/p>\n
Take for example this hard text shadow:<\/p>\n
\r\nbody {\r\n\tbackground: #fff3cd;\t\t\t              \/* changed body background color *\/\r\n}\r\n\r\n.text {\r\n\tfont-size: 5em; \t\t\t\t\t\r\n\tcolor: white;\t\t\t\t\t\t\t\t\t\t\/* changed text-color to white *\/\r\n    text-shadow: 6px 6px 0px rgba(0,0,0,0.2);\t\t\t\/* added retro-feel shadow *\/\r\n}\r\n<\/pre>\n
\"Retro<\/a>
Retro Hard Shadow Effect<\/figcaption><\/figure>\n
2.3 Double Shadow Effect<\/h3>\n
It is interesting to know that you are not limited to one single shadow application.<\/p>\n
You can use more than one shadow like this: text-shadow: shadow1, shadow2, shadow3;<\/code><\/p>\n
Let’s add two shadows, one of them with the color of the background, and the other one a slightly darker color than the background color:<\/p>\n
\r\n.text {\r\n\tfont-size: 5em; \t\t\t\t\t\t\t\t\t\t\t\t\r\n    text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);    \/* given two shadows *\/\r\n}\r\n<\/pre>\n
In this case, the background is white, so we don’t need a custom color for it.<\/p>\n
The view in the browser would be:
\n
\"Double<\/a>
Double Shadow Effect<\/figcaption><\/figure><\/p>\n
2.4 Distant Down Shadow Effect<\/h3>\n
This effect lies on the multi-shadow capability of css.<\/p>\n
Below, you can see 4 shadows pointing down with various degrees.<\/p>\n
\r\nbody {\r\n\tbackground: #fff3cd;\t\t\t\/* changed body background color *\/\r\n}\r\n\r\n.text {\r\n\tfont-size: 5em;\r\n\tcolor: white; \t\t\t\t\t\t\t\t\t\t\t\t\r\n    text-shadow: 0px 3px 0px #b2a98f,\r\n             \t 0px 14px 10px rgba(0,0,0,0.15),\r\n             \t 0px 24px 2px rgba(0,0,0,0.1),\r\n            \t 0px 34px 30px rgba(0,0,0,0.1);\t\t\r\n}\r\n<\/pre>\n
\"Distant<\/a>
Distant Down Shadow Effect<\/figcaption><\/figure>\n
2.5 Mark Dotto\u2019s 3D Text Effect<\/h3>\n
The following example is just as impressive as you might be wondering.<\/p>\n
It comes from MarkDotto.com and utilizes an impressive 12 separate shadows to pull off a very believable 3D effect.<\/p>\n
\r\nbody {\r\n\tbackground: #3495c0;\t\t\t\/* changed body background color *\/\r\n}\r\n\r\n.text {\r\n\tfont-size: 5em;\r\n\tcolor: white; \t\t\t\t\t\t\t\t\t\t\t\t\r\n    text-shadow: 0 1px 0 #ccc, \r\n              0 2px 0 #c9c9c9,\r\n              0 3px 0 #bbb,\r\n              0 4px 0 #b9b9b9,\r\n              0 5px 0 #aaa,\r\n              0 6px 1px rgba(0,0,0,.1),\r\n              0 0 5px rgba(0,0,0,.1),\r\n              0 1px 3px rgba(0,0,0,.3),\r\n              0 3px 5px rgba(0,0,0,.2),\r\n              0 5px 10px rgba(0,0,0,.25),\r\n              0 10px 10px rgba(0,0,0,.2),\r\n              0 20px 20px rgba(0,0,0,.15);\r\n}\r\n<\/pre>\n
Now look at this:
\n
\"3D<\/a>
3D Shadow Effect<\/figcaption><\/figure><\/p>\n
2.6 Gordon Hall\u2019s True Inset Text Effect<\/h3>\n
Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well.<\/p>\n
\r\nbody {\r\n\tbackground: #cbcbcb;\t\t\t\/* changed body background color *\/\r\n}\r\n\r\n.text {\r\n\tfont-size: 5em;\r\n\tcolor: transparent; \t\t\t\t\t\t\t\t\t\t\r\n\tbackground-color: #666666;\r\n\t\t   -webkit-background-clip: text;\r\n\t\t   -moz-background-clip: text;\r\n\t\t   background-clip: text;\r\n\t\t   text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;\r\n}\r\n<\/pre>\n
And that gives and incredible true inset text effect.
\n
\"Text<\/a>
Text  Inset Effect<\/figcaption><\/figure><\/p>\n
2.7 Glowing Text Shadow Effect<\/h3>\n
\r\nbody {\r\n\tbackground: #992d23;\t\t\t\/* changed body background color *\/\r\n}\r\n\r\n.text {\r\n\tfont-size: 5em;\r\n\tcolor: white; \t\t\t\t\t\t\t\t\t\t\t\t\r\n\ttext-shadow: 0px 0px 6px rgba(255,255,255,0.7);\r\n}\r\n<\/pre>\n
This shadow will create the effect of a glowing text.
\n
\"Glowing<\/a>
Glowing Text – Shadow Effect<\/figcaption><\/figure><\/p>\n
2.8 Soft Emboss Shadow Effect<\/h3>\n
\r\nbody {\r\n\tbackground: #629552;\t\t\t\/* changed body background color *\/\r\n}\r\n\r\n.text {\r\n\tfont-size: 5em;\t\t\t\t\t\t\t\t\t\t\t\r\n\tcolor: rgba(0,0,0,0.6);\r\n\ttext-shadow: 2px 8px 6px rgba(0,0,0,0.2),\r\n                 0px -5px 35px rgba(255,255,255,0.3);\r\n}\r\n<\/pre>\n
\"Soft<\/a>
Soft Emboss – Text Shadow Effect<\/figcaption><\/figure>\n
3. Conclusion<\/h2>\n
As you saw in this example, the text-shadow property is really easy to use. <\/p>\n
What’s interesting, is that you can come up with creative effects if you put yourself into it.<\/p>\n
These effects are used all over the web (I did not ‘invent’ them) so be sure you are using qualitative stuff.<\/p>\n
You can also download the source html and just edit these examples that you saw above.<\/p>\n
Download<\/strong>
\nYou can download the full source code of this example here: CSS Text Shadow<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
Ever felt chaotic about text going into unsuitable button colors, boxes or simply sitting inside a bad contrast in the page? Well, it’s probably because you’ve used colors that won’t match to give a good view of the text, (e.g make it readable). With CSS, it is very easy to solve this using the text-shadow …<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-3792","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"\nCSS Text Shadow Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Ever felt chaotic about text going into unsuitable button colors, boxes or simply sitting inside a bad contrast in the page? Well, it's probably because\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Text Shadow Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Ever felt chaotic about text going into unsuitable button colors, boxes or simply sitting inside a bad contrast in the page? Well, it's probably because\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-04-23T09:15:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-09T07:14:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Text Shadow Example\",\"datePublished\":\"2015-04-23T09:15:18+00:00\",\"dateModified\":\"2018-01-09T07:14:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/\"},\"wordCount\":732,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/\",\"name\":\"CSS Text Shadow Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-04-23T09:15:18+00:00\",\"dateModified\":\"2018-01-09T07:14:28+00:00\",\"description\":\"Ever felt chaotic about text going into unsuitable button colors, boxes or simply sitting inside a bad contrast in the page? Well, it's probably because\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Text Shadow Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Text Shadow Example - Web Code Geeks - 2026","description":"Ever felt chaotic about text going into unsuitable button colors, boxes or simply sitting inside a bad contrast in the page? Well, it's probably because","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Text Shadow Example - Web Code Geeks - 2026","og_description":"Ever felt chaotic about text going into unsuitable button colors, boxes or simply sitting inside a bad contrast in the page? Well, it's probably because","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-04-23T09:15:18+00:00","article_modified_time":"2018-01-09T07:14:28+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Text Shadow Example","datePublished":"2015-04-23T09:15:18+00:00","dateModified":"2018-01-09T07:14:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/"},"wordCount":732,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/","name":"CSS Text Shadow Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-04-23T09:15:18+00:00","dateModified":"2018-01-09T07:14:28+00:00","description":"Ever felt chaotic about text going into unsuitable button colors, boxes or simply sitting inside a bad contrast in the page? Well, it's probably because","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-shadow-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Text Shadow Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/3792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=3792"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/3792\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=3792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=3792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=3792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}