{"id":1515,"date":"2019-06-03T18:07:43","date_gmt":"2019-06-03T18:07:43","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=1515"},"modified":"2019-06-03T18:07:43","modified_gmt":"2019-06-03T18:07:43","slug":"css-text-shadow","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/css-text-shadow\/","title":{"rendered":"CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects"},"content":{"rendered":"<p><strong>How we can create different kinds of text-shadow effect using CSS3? Solution:\u00a0 See This CSS Text Shadow Effect &#8211; Elegant, Deep, Insert, Retro Effects.<\/strong><\/p>\n<p>I am sure that, You have seen many types of <strong>shadow effects on text<\/strong>. Using shadow you can give a text <span><a href=\"https:\/\/webdevtrick.com\/css-flip-effect-on-hover\/\" target=\"_blank\" rel=\"noopener noreferrer\">3D effect<\/a><\/span> &amp; many other kinds of effects. Mostly designers and developers use cool shadow effects to create a unique design on the webpage. A good <strong>shadow<\/strong> creates an object more attractive.<\/p>\n<p>Now question is that there is one property for creating <strong>text-shadow<\/strong>, but how we can create different kinds of shadow using this single property? The answer is simple, <span><a href=\"https:\/\/webdevtrick.com\/random-color-generator-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">changing colors<\/a><\/span> and distance value in<strong> shadow property<\/strong>. We can create more interesting concepts like this using <strong>CSS3<\/strong>. In <strong>some shadow effect<\/strong>, we have to put many distances and color value. For creating a <strong>cool shadow effect<\/strong>, make sure you must have creativity and patience.<\/p>\n<p>So, Today I am sharing <strong>4 types of CSS Text Shadow Effect<\/strong>, <strong>Elegant Shadow<\/strong>, <strong>Deep Shadow<\/strong>, <strong>Insert Shadow<\/strong>, &amp;<strong> Retro Shadow effect<\/strong>. As I told before, these multiple effects based on different colors on different positions. Some peoples don&#8217;t know these effects by name, but they know the effect looks visually. Like<strong> elegant shadow called long shadow<\/strong> effect in simple words.<\/p>\n<p>If you don&#8217;t get how these effects actually are, then see the <strong>preview<\/strong> given below.<\/p>\n<h3>Preview Of Elegant, Deep, Insert, Retro Shadow Effects<\/h3>\n<p>See this video preview to getting an idea of how the effects look like.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1515-1\" width=\"640\" height=\"360\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow-effects.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow-effects.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow-effects.mp4<\/a><\/video><\/div>\n<p>Now you can see this program visually. If you like this then get the <strong>source code<\/strong> of its.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/css-circle-menu\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Circular Menu With Icons<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/html-css-glitch-effect\/\" target=\"_blank\" rel=\"noopener noreferrer\">Text Glitch Effect With HTML CSS<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/html-css-javascript-calendar\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML CSS JavaScript Calendar<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/css-responsive-navbar\/\" target=\"_blank\" rel=\"noopener noreferrer\">Responsive Navigation Bar<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>CSS Text Shadow Effects Source Code<\/h2>\n<p>Before <strong>sharing source code<\/strong>, let&#8217;s talk about this. First I want to talk about what things and properties I used to create is <strong>CSS Text Shadow Effects<\/strong>. I used CSS <code>text-shadow<\/code> property for <strong>creating the shadow<\/strong>. And I used <code>letter-spacing<\/code> property to make text and shadow clear and visible.<\/p>\n<p>First, understand the <strong>text-shadow property<\/strong>, Suppose there you put <code>text-shadow: 1px -2px 0 #767676;<\/code> in CSS value. The first 1px is for margin left, and the second -2px for margin-top and the last 0 value is for blur effect (more<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-shadow\" target=\"_blank\" rel=\"noopener noreferrer\"> info<\/a>). you can change the 0 value for creating a <strong>blur effect<\/strong>. At the last, this is a code of color, which is for <strong>shadow color<\/strong>.<\/p>\n<p>That&#8217;s the whole things which this effects based on. You can understand easily after seeing the codes. You have to create only 2 files to create this, one for <strong>HTML<\/strong> and one for <span><a href=\"https:\/\/webdevtrick.com\/web-design\/css\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>CSS<\/strong><\/a><\/span>. Follow the steps to creating this without any error.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<strong><em>index.html<\/em><\/strong>&#8216; and put these codes given here below.<\/p>\n<pre class=\"lang:xhtml decode:true\" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n\t&lt;!-- code by webdevtrick ( https:\/\/webdevtrick.com ) --&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;CSS Text Shadow Effects&lt;\/title&gt;\r\n\t&lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Bungee&amp;display=swap\" rel=\"stylesheet\"&gt;\r\n\t&lt;link href=\"style.css\" rel=\"stylesheet\"&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n  &lt;h1 class=\"elegant-shadow\"&gt;Elegant Shadow&lt;\/h1&gt;\r\n&lt;h1 class=\"deep-shadow\"&gt;Deep Shadow&lt;\/h1&gt;\r\n&lt;h1 class=\"inset-shadow\"&gt;Inset Shadow&lt;\/h1&gt;\r\n&lt;h1 class=\"retro-shadow\"&gt;Retro Shadow&lt;\/h1&gt;\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<strong><em>style.css<\/em><\/strong>&#8216; and put the codes.<\/p>\n<pre class=\"lang:css decode:true \" title=\"style.css\">  h1 {\r\nfont-family: 'Bungee', cursive;\r\n  font-size: 92px;\r\n  padding: 80px 50px;\r\n  text-align: center;\r\n  text-transform: uppercase;\r\n  text-rendering: optimizeLegibility;\r\n}\r\nh1.elegant-shadow {\r\n  color: #131313;\r\n  background-color: #e7e5e4;\r\n  letter-spacing: 0.15em;\r\n  text-shadow: 1px -1px 0 #767676, -1px 2px 1px #737272, -2px 4px 1px #767474, -3px 6px 1px #787777, -4px 8px 1px #7b7a7a, -5px 10px 1px #7f7d7d, -6px 12px 1px #828181, -7px 14px 1px #868585, -8px 16px 1px #8b8a89, -9px 18px 1px #8f8e8d, -10px 20px 1px #949392, -11px 22px 1px #999897, -12px 24px 1px #9e9c9c, -13px 26px 1px #a3a1a1, -14px 28px 1px #a8a6a6, -15px 30px 1px #adabab, -16px 32px 1px #b2b1b0, -17px 34px 1px #b7b6b5, -18px 36px 1px #bcbbba, -19px 38px 1px #c1bfbf, -20px 40px 1px #c6c4c4, -21px 42px 1px #cbc9c8, -22px 44px 1px #cfcdcd, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;\r\n}\r\nh1.deep-shadow {\r\n  color: #e0dfdc;\r\n  background-color: #333;\r\n  letter-spacing: 0.1em;\r\n  text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);\r\n}\r\nh1.inset-shadow {\r\n  color: #202020;\r\n  background-color: #2d2d2d;\r\n  letter-spacing: 0.1em;\r\n  text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;\r\n}\r\nh1.retro-shadow {\r\n  color: #2c2c2c;\r\n  background-color: #d5d5d5;\r\n  letter-spacing: 0.05em;\r\n  text-shadow: 4px 4px 0px #d5d5d5, 7px 7px 0px rgba(0, 0, 0, 0.2);\r\n}<\/pre>\n<p>That&#8217;s It. Now you have successfully created 4 types of CSS Text Shadow Effect. If you have any doubt or question comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How we can create different kinds of text-shadow effect using CSS3? Solution:\u00a0 See This CSS Text Shadow Effect &#8211; Elegant, Deep, Insert, Retro Effects. I am sure that, You have seen many types of shadow effects on text. Using shadow you can give a text 3D effect &amp; many other kinds of effects. Mostly designers [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1517,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42,22],"tags":[185,190,155,68,154,208,67,207,209],"class_list":["post-1515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-web-design","tag-animated-text","tag-example-and-source-code","tag-html-and-css","tag-html-source-code","tag-pure-css","tag-shadow","tag-source-code","tag-text","tag-text-shadow"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects<\/title>\n<meta name=\"description\" content=\"Want to create text-shadow with HTML &amp; CSS? Get the Source Code Of This CSS Text Shadow Effect. Elegant, Deep, Insert, and Retro Shadow Effects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/css-text-shadow\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects\" \/>\n<meta property=\"og:description\" content=\"Want to create text-shadow with HTML &amp; CSS? Get the Source Code Of This CSS Text Shadow Effect. Elegant, Deep, Insert, and Retro Shadow Effects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/css-text-shadow\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-03T18:07:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"629\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\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:\/\/webdevtrick.com\/css-text-shadow\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/css-text-shadow\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects\",\"datePublished\":\"2019-06-03T18:07:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/css-text-shadow\/\"},\"wordCount\":530,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/css-text-shadow\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow.jpg\",\"keywords\":[\"animated text\",\"example and source code\",\"html and css\",\"html source code\",\"pure css\",\"shadow\",\"source code\",\"text\",\"text-shadow\"],\"articleSection\":[\"CSS\",\"HTML\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/css-text-shadow\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/css-text-shadow\/\",\"url\":\"https:\/\/webdevtrick.com\/css-text-shadow\/\",\"name\":\"CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/css-text-shadow\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/css-text-shadow\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow.jpg\",\"datePublished\":\"2019-06-03T18:07:43+00:00\",\"description\":\"Want to create text-shadow with HTML & CSS? Get the Source Code Of This CSS Text Shadow Effect. Elegant, Deep, Insert, and Retro Shadow Effects.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/css-text-shadow\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/css-text-shadow\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/css-text-shadow\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow.jpg\",\"width\":1200,\"height\":629,\"caption\":\"css text shadow effects\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/css-text-shadow\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects","description":"Want to create text-shadow with HTML & CSS? Get the Source Code Of This CSS Text Shadow Effect. Elegant, Deep, Insert, and Retro Shadow Effects.","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:\/\/webdevtrick.com\/css-text-shadow\/","og_locale":"en_US","og_type":"article","og_title":"CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects","og_description":"Want to create text-shadow with HTML & CSS? Get the Source Code Of This CSS Text Shadow Effect. Elegant, Deep, Insert, and Retro Shadow Effects.","og_url":"https:\/\/webdevtrick.com\/css-text-shadow\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2019-06-03T18:07:43+00:00","og_image":[{"width":1200,"height":629,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/css-text-shadow\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/css-text-shadow\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects","datePublished":"2019-06-03T18:07:43+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/css-text-shadow\/"},"wordCount":530,"commentCount":0,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/css-text-shadow\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow.jpg","keywords":["animated text","example and source code","html and css","html source code","pure css","shadow","source code","text","text-shadow"],"articleSection":["CSS","HTML","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/css-text-shadow\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/css-text-shadow\/","url":"https:\/\/webdevtrick.com\/css-text-shadow\/","name":"CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/css-text-shadow\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/css-text-shadow\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow.jpg","datePublished":"2019-06-03T18:07:43+00:00","description":"Want to create text-shadow with HTML & CSS? Get the Source Code Of This CSS Text Shadow Effect. Elegant, Deep, Insert, and Retro Shadow Effects.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/css-text-shadow\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/css-text-shadow\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/css-text-shadow\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-text-shadow.jpg","width":1200,"height":629,"caption":"css text shadow effects"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/css-text-shadow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"CSS Text Shadow Effect | Elegant, Deep, Insert, Retro Effects"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=1515"}],"version-history":[{"count":0,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/1515\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/1517"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=1515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=1515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=1515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}