{"id":14889,"date":"2020-04-17T22:40:16","date_gmt":"2020-04-18T05:40:16","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14889"},"modified":"2023-12-01T02:41:36","modified_gmt":"2023-12-01T10:41:36","slug":"css-text-shadow","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/","title":{"rendered":"CSS Text Shadow"},"content":{"rendered":"\n<p>Adding shadows to an element is one component of creating an attractive header. For instance, if you\u2019re designing a website, you may want to add a shadow to every top header to make the header stand out from other header text on the web page.<br><\/p>\n\n\n\n<p>That\u2019s where the CSS text-shadow property comes in. The text-shadow property allows you to add a shadow effect to a text element. This tutorial will discuss, with examples, the basics of text shadows and how to use the text-shadow property to add a shadow to text on a web page.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS Text Shadow<\/h2>\n\n\n\n<p>Shadows are one way of distinguishing an element on a web page. A line of text with a green shadow, for example, is more likely to catch the eye of a user than a standard line of black text.<br><\/p>\n\n\n\n<p>The text-shadow property allows you to add a shadow around a text element in CSS. You can apply the text-shadow element to headers, paragraph text, and other text-based elements in HTML.<br><\/p>\n\n\n\n<p>The basic syntax for the text-shadow property is as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>text-shadow: offset-x offset-y blur-radius color;<\/pre><\/div>\n\n\n\n<p>The syntax for the text-shadow property is similar to the syntax for the box-shadow property, which is used to apply shadows to box-based HTML elements. To learn more about box shadows in CSS, read our beginner\u2019s guide to <a href=\"https:\/\/careerkarma.com\/blog\/css-box-shadow\">CSS box shadows<\/a>.<br><\/p>\n\n\n\n<p>Here are the main components of the syntax for the text-shadow property:<br><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>offset-x is the horizontal (x axis) offset for the shadow (required).<\/li>\n\n\n\n<li>offset-y is the vertical (y axis) offset for the shadow (required).<\/li>\n\n\n\n<li>blur-radius is the radius of the blur effect for the shadow (optional).<\/li>\n\n\n\n<li>color is the color of the shadow. The default color for a text-shadow is black (optional).<\/li>\n<\/ul>\n\n\n\n<p>Let\u2019s explore a few examples of the text-shadow property in action to illustrate how to use the property to create your own text shadows. For the purpose of this tutorial, we\u2019re going to use the following HTML element:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n&lt;h1&gt;Career Karma&lt;\/h1&gt;\n&lt;style&gt;\nh1 {\n\tcolor: lightblue;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the<\/em>&nbsp;<img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>When we run our code, an &lt;h1&gt; element is rendered which presents the text <code>Career Karma<\/code> on the screen. &lt;h1&gt; is the largest header element supported by HTML. Our CSS code sets the value of the color property in our header to <code>lightblue<\/code>. This means our header appears in light blue text.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Basic Text Shadow<\/h2>\n\n\n\n<p>There are only two required attributes you need to specify when working with the text-shadow property: offset-x and offset-y. If we specify these two properties, we can create text with a horizontal and vertical shadow.<br><\/p>\n\n\n\n<p>Here\u2019s an example of the text-shadow property with both these values specified:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n&lt;h1&gt;Career Karma&lt;\/h1&gt;\n&lt;style&gt;\nh1 {\n\ttext-shadow: 1px 1px;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>In our code, we applied a simple text-shadow to our header. This shadow is offset by 1px on both the horizontal and vertical axes. If you look at the result of our code, you can see there is a slight black shadow applied beneath our text. Black is the default color for a shadow.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Shadow Colors<\/h2>\n\n\n\n<p>When you\u2019re designing a text-shadow, you may decide that you want to specify a custom color for your shadow. That\u2019s where the color attribute comes in.<br><\/p>\n\n\n\n<p>Suppose we wanted our shadow to be light pink. We could change the color of our shadow to pink using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n&lt;h1&gt;Career Karma&lt;\/h1&gt;\n&lt;style&gt;\nh1 {\n\ttext-shadow: 1px 1px pink;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>In our code, we specified the color attribute and set its value to <code>pink<\/code>. This allowed us to create a pink shadow beneath our text. Like in our first example, our shadow is offset by 1px on both the horizontal and vertical axes.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Blurred Shadow<\/h2>\n\n\n\n<p>The text-shadow property can be used in combination with the blur-radius attribute to create a blurred shadow.<br><\/p>\n\n\n\n<p>Now, let\u2019s say we want to create a shadow that is offset by 3px on both the horizontal and vertical axes and has a 2px blur effect surrounding the shadow. We could create this shadow using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n&lt;h1&gt;Career Karma&lt;\/h1&gt;\n&lt;style&gt;\nh1 {\n\ttext-shadow: 3px 3px 2px pink;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>As you can see, our shadow is offset by 3px on both axes, and our shadow is surrounded by a blur effect. To intensify our blur effect, we could increase the value of the blur-radius attribute. If we wanted a more blurry shadow, we could set the value of blur-radius to 5px, or 10px, or higher, depending on the blur we want to use. In this example, our shadow is pink.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Multiple Shadows<\/h2>\n\n\n\n<p>So far, we have discussed how to use the text-shadow property to apply one shadow to a block of text. However, the text-shadow property can also be used to add multiple shadows to a text element.<br><\/p>\n\n\n\n<p>To add multiple shadows to a block of text, you should create a comma-separated list of shadows. The syntax for creating multiple text shadows is as follows:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>text-shadow: shadowOne, shadowTwo;<\/pre><\/div>\n\n\n\n<p>You can specify as many shadows as you want, as long as each shadow is separated using a comma. However, the x-offset and y-offset values you specify for each shadow must increase over time, otherwise, your shadows will overlap and may not be visible.<br><\/p>\n\n\n\n<p>The shadows will appear in the order they are specified. So, shadowOne will appear before shadowTwo.<br><\/p>\n\n\n\n<p>Let\u2019s suppose we want to create a text banner with pink and orange shadows behind the text. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n&lt;h1&gt;Career Karma&lt;\/h1&gt;\n&lt;style&gt;\nh1 {\n\ttext-shadow: 3px 3px 2px pink, 6px 6px 5px orange;\n}<\/pre><\/div>\n\n\n\n<p><em>Click the<\/em> <img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>In our code, we specified two shadows. Here are the values we specified for each of our shadows:<br><\/p>\n\n\n\n<figure class=\"wp-block-table course-info-table\"><table><tbody><tr><td><strong>Property Name<\/strong><\/td><td><strong>Shadow One<\/strong><\/td><td><strong>Shadow Two<\/strong><\/td><\/tr><tr><td>offset-x<\/td><td>3px<\/td><td>6px<\/td><\/tr><tr><td>offset-y<\/td><td>3px<\/td><td>6px<\/td><\/tr><tr><td>blur-radius<\/td><td>2px<\/td><td>5px<\/td><\/tr><tr><td>color<\/td><td>pink<\/td><td>orange<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>As you can see, we created two shadows in our code, each with different values.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The text-shadow property is used to add a shadow to a block of text in HTML. Text shadows can be applied to any text-based element such as headers and paragraphs.<br><\/p>\n\n\n\n<p>This tutorial discussed, with reference to examples, the basics of text shadows and how to use the text-shadow property to create a custom text-shadow. Now you have the knowledge you need to start designing your own CSS text shadows like an expert web designer!<br><\/p>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"Adding shadows to an element is one component of creating an attractive header. For instance, if you\u2019re designing a website, you may want to add a shadow to every top header to make the header stand out from other header text on the web page. That\u2019s where the CSS text-shadow property comes in. The text-shadow&hellip;","protected":false},"author":240,"featured_media":14890,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14889","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.0) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Text Shadow: A Step By Step Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The CSS text-shadow property allows developers to create a shadow around a block of text. On Career Karma, learn how to use the text-shadow property.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/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\" \/>\n<meta property=\"og:description\" content=\"The CSS text-shadow property allows developers to create a shadow around a block of text. On Career Karma, learn how to use the text-shadow property.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-18T05:40:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:41:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/books-business-computer-connection-459654.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Text Shadow\",\"datePublished\":\"2020-04-18T05:40:16+00:00\",\"dateModified\":\"2023-12-01T10:41:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/\"},\"wordCount\":1071,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/books-business-computer-connection-459654.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/\",\"name\":\"CSS Text Shadow: A Step By Step Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/books-business-computer-connection-459654.jpg\",\"datePublished\":\"2020-04-18T05:40:16+00:00\",\"dateModified\":\"2023-12-01T10:41:36+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS text-shadow property allows developers to create a shadow around a block of text. On Career Karma, learn how to use the text-shadow property.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/books-business-computer-connection-459654.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/books-business-computer-connection-459654.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Text Shadow\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Text Shadow: A Step By Step Guide | Career Karma","description":"The CSS text-shadow property allows developers to create a shadow around a block of text. On Career Karma, learn how to use the text-shadow property.","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:\/\/careerkarma.com\/blog\/css-text-shadow\/","og_locale":"en_US","og_type":"article","og_title":"CSS Text Shadow","og_description":"The CSS text-shadow property allows developers to create a shadow around a block of text. On Career Karma, learn how to use the text-shadow property.","og_url":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-18T05:40:16+00:00","article_modified_time":"2023-12-01T10:41:36+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/books-business-computer-connection-459654.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Text Shadow","datePublished":"2020-04-18T05:40:16+00:00","dateModified":"2023-12-01T10:41:36+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/"},"wordCount":1071,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/books-business-computer-connection-459654.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-text-shadow\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/","url":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/","name":"CSS Text Shadow: A Step By Step Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/books-business-computer-connection-459654.jpg","datePublished":"2020-04-18T05:40:16+00:00","dateModified":"2023-12-01T10:41:36+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS text-shadow property allows developers to create a shadow around a block of text. On Career Karma, learn how to use the text-shadow property.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-text-shadow\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/books-business-computer-connection-459654.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/books-business-computer-connection-459654.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-text-shadow\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Text Shadow"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14889","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14889"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14889\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14890"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}