{"id":2216,"date":"2016-08-03T07:51:25","date_gmt":"2016-08-03T07:51:25","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2216"},"modified":"2023-11-08T02:19:17","modified_gmt":"2023-11-08T02:19:17","slug":"create-css-text-shadow-4-online-demos","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/","title":{"rendered":"Create CSS text shadow Explained with 4 Examples"},"content":{"rendered":"<div class=\"bullet-1\"><strong>The text-shadow property in CSS<\/strong><\/p>\n<ul>\n<li>The text-shadow property, as the name shows, is used to give shadows in the\u00a0text of the web pages.<\/li>\n<li>Normally, you will use text shadows in headings or any other text to make it prominent.<\/li>\n<li>You may also add animation based on CSS to the shadows to even stand out more.<\/li>\n<li>I will show you demos of using shadows in this tutorial, so keep reading.<\/li>\n<li>You may also add animation based on CSS to the shadows to even stand out more.<\/li>\n<\/ul>\n<\/div>\n<h3><strong>How to use CSS text-shadow property?<\/strong><\/h3>\n<p>The simple syntax to use the text-shadow property is:<\/p>\n<div class=\"codesdiv1\">text-shadow: horizontal-shadow vertical-shadow blur color;<\/div>\n<p>Where the <em>horizontal<\/em> and <em>vertical<\/em> shadow values are required while <strong><em>blur<\/em><\/strong> and <strong><em>color<\/em><\/strong> are optional.<\/p>\n<h3><strong>An example of text-shadow property<\/strong><\/h3>\n<p>In this demo, the text-shadow property is used twice for defining the shadow of text in the div element. For proper text-shadow, a few other CSS properties like background color, font-size, font weight, etc. are also used. The first set of values in text-shadow applies the shadow on top, have a look:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2217\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/22.0_1-CSS-shadow.jpg\" alt=\"CSS shadow\" width=\"819\" height=\"108\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/22.0_1-CSS-shadow.jpg 819w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/22.0_1-CSS-shadow-300x39.jpg 300w\" sizes=\"(max-width: 819px) 100vw, 819px\" \/><\/p>\n<p><strong>The CSS:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.text-shadow-demo {\r\n\r\n\u00a0 width:auto;\u00a0\r\n\r\n\u00a0 background-color: #6B7DE2;\r\n\r\n\u00a0 color: #e0eff2;\r\n\r\n\u00a0 font-family: Georgia, Serif;\r\n\r\n\u00a0 font-weight: 700;\r\n\r\n\u00a0 font-style: italic;\r\n\r\n\u00a0 font-size: 80px;\r\n\r\n\u00a0 text-shadow: -4px 3px 0 #408080, -14px 7px 0 #0a0e27;\r\n\r\n}<\/pre>\n<p><strong>The markup:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"text-shadow-demo\"&gt;\r\n\r\n\u00a0 Text Shadow demo\r\n\r\n&lt;\/div&gt;<\/pre>\n<h3><strong>Style number 2 for text-shadow<\/strong><\/h3>\n<p>In this demo, the CSS shadow property is used many times for creating the shadow. That way, you may provide different colors at different points, have a look:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2218\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/22.0_2-CSS-shadow-style.jpg\" alt=\"CSS shadow style\" width=\"738\" height=\"95\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/22.0_2-CSS-shadow-style.jpg 738w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/22.0_2-CSS-shadow-style-300x38.jpg 300w\" sizes=\"(max-width: 738px) 100vw, 738px\" \/><\/p>\n<p><strong>The CSS:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.text-shadow-demo2 {\r\n\r\n\u00a0 color: #376F6F;\r\n\r\n\u00a0 font-family: Arial, Serif;\r\n\r\n\u00a0 font-weight: 700;\r\n\r\n\u00a0 font-style: italic;\r\n\r\n\u00a0 font-size: 80px;\r\n\r\n\u00a0\r\n\r\n\u00a0 text-shadow:\r\n\r\n\u00a0\u00a0\u00a0\u00a0 0 1px #00BFBF,-1px 0 #98B5B8,-1px 2px #00BFBF,-2px 1px #98B5B8,-2px 3px #00BFBF,-3px 2px #98B5B8,-3px 4px #00BFBF,-4px 3px #98B5B8,\r\n\r\n\u00a0\u00a0\u00a0 -4px 5px #00BFBF,-5px 4px #98B5B8,-5px 6px #00BFBF,-6px 5px #98B5B8, -6px 7px #00BFBF,-7px 6px #98B5B8,-7px 8px #00BFBF,-8px 7px #98B5B8;\r\n\r\n}<\/pre>\n<h3><strong>Style number 3 of the shadow effect<\/strong><\/h3>\n<p>See this shadow effect where text looks broken or in dashed way by using the white color for <a href=\"\/css-color-property-2-demos-of-text-color-animation-and-links\">the color property<\/a> and different colors for the shadow property:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2219\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/23.0_3-CSS-shadow-style3.jpg\" alt=\"CSS shadow style3\" width=\"642\" height=\"186\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/23.0_3-CSS-shadow-style3.jpg 642w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/23.0_3-CSS-shadow-style3-300x86.jpg 300w\" sizes=\"(max-width: 642px) 100vw, 642px\" \/><\/p>\n<p>The CSS:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.text-shadow-demo3 {\r\n\r\n\u00a0\u00a0\u00a0 font-size:60px;\r\n\r\n\u00a0\u00a0\u00a0 font-family: verdana;\r\n\r\n\u00a0\u00a0\u00a0 letter-spacing: .18em;\r\n\r\n\u00a0\u00a0\u00a0 color:#fff;\r\n\r\n\u00a0\u00a0\u00a0 text-shadow:\u00a0 0.45rem -0.45rem #B41039, -0.45rem -0.45rem #F3819D, 0 0.5rem rgba(255, 88, 9, 0.75);\r\n\r\n}<\/pre>\n<h3><strong>Text shadow style number 4 using RGB<\/strong><\/h3>\n<p>In this example, the RGB color codes are used in the shadow CSS property. See the code and output by clicking the image or link below:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2220\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/23.0_4-CSS-shadow-style4.jpg\" alt=\"CSS shadow style4\" width=\"736\" height=\"123\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/23.0_4-CSS-shadow-style4.jpg 736w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/23.0_4-CSS-shadow-style4-300x50.jpg 300w\" sizes=\"(max-width: 736px) 100vw, 736px\" \/><\/p>\n<p><strong>HTML and CSS<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"c\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;style&gt;\r\n.text-shadow-demo3 {\r\n  text-align: center;\r\n  font-family: Georgia, Serif;\r\n  font-weight: 800;\r\n  font-style: italic;\r\n  font-size: 70px;\r\n  padding: 40px 0;\r\n  letter-spacing:1px;    \r\n  color: #92a5de;\r\n\r\n  text-shadow:0px 0px 0 rgb(137,156,213),1px 1px 0 rgb(129,148,205),2px 2px 0 rgb(120,139,196),3px 3px 0 rgb(111,130,187),4px 4px 0 rgb(103,122,179),5px 5px 0 rgb(94,113,170),6px 6px 0 rgb(85,104,161),7px 7px 0 rgb(76,95,152),8px 8px 0 rgb(68,87,144),9px 9px 0 rgb(59,78,135),10px 10px 0 rgb(50,69,126),11px 11px 0 rgb(42,61,118),12px 12px 0 rgb(33,52,109),13px 13px 0 rgb(24,43,100),14px 14px 0 rgb(15,34,91),15px 15px 0 rgb(7,26,83),16px 16px 0 rgb(-2,17,74),17px 17px 0 rgb(-11,8,65),18px 18px 0 rgb(-19,0,57),19px 19px 0 rgb(-28,-9,48), 20px 20px 0 rgb(-37,-18,39),21px 21px 20px rgba(0,0,0,1),21px 21px 1px rgba(0,0,0,0.5),0px 0px 20px rgba(0,0,0,.2);\r\n}\r\n\r\n&lt;\/style&gt; \r\n\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"text-shadow-demo3\"&gt;\r\n  Text Shadow demo\r\n&lt;\/div&gt;\r\n\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The text-shadow property in CSS The text-shadow property, as the name shows, is used to give shadows in the\u00a0text of the web pages. Normally, you will use text shadows in headings or any other text to make it prominent. You may also add animation based on CSS to the shadows to even stand out more. &#8230; <a title=\"Create CSS text shadow Explained with 4 Examples\" class=\"read-more\" href=\"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/\" aria-label=\"More on Create CSS text shadow Explained with 4 Examples\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2218,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[47],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Create CSS text shadow Explained with 4 Examples<\/title>\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.jquery-az.com\/create-css-text-shadow-4-online-demos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create CSS text shadow Explained with 4 Examples\" \/>\n<meta property=\"og:description\" content=\"The text-shadow property in CSS The text-shadow property, as the name shows, is used to give shadows in the\u00a0text of the web pages. Normally, you will use text shadows in headings or any other text to make it prominent. You may also add animation based on CSS to the shadows to even stand out more. ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-08-03T07:51:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-08T02:19:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/22.0_2-CSS-shadow-style.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"738\" \/>\n\t<meta property=\"og:image:height\" content=\"95\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/\",\"url\":\"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/\",\"name\":\"Create CSS text shadow Explained with 4 Examples\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-08-03T07:51:25+00:00\",\"dateModified\":\"2023-11-08T02:19:17+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create CSS text shadow Explained with 4 Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create CSS text shadow Explained with 4 Examples","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.jquery-az.com\/create-css-text-shadow-4-online-demos\/","og_locale":"en_US","og_type":"article","og_title":"Create CSS text shadow Explained with 4 Examples","og_description":"The text-shadow property in CSS The text-shadow property, as the name shows, is used to give shadows in the\u00a0text of the web pages. Normally, you will use text shadows in headings or any other text to make it prominent. You may also add animation based on CSS to the shadows to even stand out more. ... Read more","og_url":"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/","article_published_time":"2016-08-03T07:51:25+00:00","article_modified_time":"2023-11-08T02:19:17+00:00","og_image":[{"width":738,"height":95,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/08\/22.0_2-CSS-shadow-style.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/","url":"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/","name":"Create CSS text shadow Explained with 4 Examples","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-08-03T07:51:25+00:00","dateModified":"2023-11-08T02:19:17+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/create-css-text-shadow-4-online-demos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"Create CSS text shadow Explained with 4 Examples"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2216"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2216"}],"version-history":[{"count":5,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2216\/revisions"}],"predecessor-version":[{"id":11210,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2216\/revisions\/11210"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2218"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}