{"id":14115,"date":"2011-09-06T18:44:22","date_gmt":"2011-09-07T01:44:22","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14115"},"modified":"2023-01-27T06:08:02","modified_gmt":"2023-01-27T14:08:02","slug":"text-shadow","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-shadow\/","title":{"rendered":"text-shadow"},"content":{"rendered":"\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p { \n  text-shadow: 1px 1px 1px #000;\n}<\/code><\/pre>\n\n\n\n<p>You can apply multiple text shadows by comma separating<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p { \n  text-shadow: 1px 1px 1px #000, \n               3px 3px 5px blue; \n}<\/code><\/pre>\n\n\n\n<p>The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow:<\/p>\n\n\n\n<p>1. value = The X-coordinate<br>2. value = The Y-coordinate<br>3. value = The blur radius<br>4. value = The color of the shadow<\/p>\n\n\n\n<p>Using positive numbers as the first two values ends up with placing the shadow to the right of the text horizontally (first value) and placing the shadow below the text vertically (second value).<\/p>\n\n\n\n<p>The third value, the blur radius, is an optional value which can be specified but don\u2019t have to. It\u2019s the amount of pixels the text is stretched which causes a blur effect. If you don\u2019t use the third value it is treated as if you specified a blur radius of zero.<\/p>\n\n\n\n<p>Also, remember you can use <a href=\"https:\/\/css-tricks.com\/rgba-browser-support\/\">RGBa<\/a> or <a href=\"https:\/\/css-tricks.com\/examples\/HSLaExplorer\/\">HSLa<\/a> values for the color, for example, a 40% transparency of white:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p { \n  text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); \n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"examples\">Examples<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_urkCd\" src=\"\/\/codepen.io\/anon\/embed\/urkCd?height=450&amp;theme-id=1&amp;slug-hash=urkCd&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed urkCd\" title=\"CodePen Embed urkCd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More Information<\/h3>\n\n\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en\/CSS\/text-shadow\" rel=\"noopener\">MDN Docs<\/a><\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser Support<\/h3>\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Chrome<\/th><th>Safari<\/th><th>Firefox<\/th><th>Opera<\/th><th>IE<\/th><th>Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td>2+<\/td><td>1.1+<\/td><td>3.5+<\/td><td>9.5+<\/td><td>10+<\/td><td>any<\/td><td>any<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>You can apply multiple text shadows by comma separating The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance of the shadow. The third value specifies the blur radius and the last value describes the color of the shadow: 1. [&hellip;]<\/p>\n","protected":false},"author":1036,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":3388,"url":"https:\/\/css-tricks.com\/snippets\/css\/css-text-shadow\/","url_meta":{"origin":14115,"position":0},"title":"CSS Text Shadow","date":"August 12, 2009","format":false,"excerpt":"Regular text shadow: p { text-shadow: 1px 1px 1px #000; } Multiple shadows: p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; } The first two values specify the length of the shadow offset. The first value specifies the horizontal distance and the second specifies the vertical distance\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9385,"url":"https:\/\/css-tricks.com\/snippets\/css\/two-color-three-dimensional-blocks-and-text\/","url_meta":{"origin":14115,"position":1},"title":"Two-Color Three-Dimensional Blocks and Text","date":"May 11, 2011","format":false,"excerpt":"We can use multiple text-shadow and box-shadow values to create a three-dimensional look to blocks or text, like this screenshot of David DeSandro's footer. However in that example, the \"three dimesional\" part is a solid color. By alternating colors back and forth in the \"stacking order\" of our box or\u2026","rel":"","context":"With 14 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16791,"url":"https:\/\/css-tricks.com\/snippets\/css\/glowing-blue-input-highlights\/","url_meta":{"origin":14115,"position":2},"title":"Glowing Blue Input Highlights","date":"April 11, 2012","format":false,"excerpt":"Like mid-2012 Twitter. input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; outline: none; padding: 3px 0px 3px 3px; margin: 5px 1px 3px 0px; border: 1px solid #DDDDDD; } input[type=text]:focus, textarea:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1);\u2026","rel":"","context":"With 34 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":346470,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-width\/","url_meta":{"origin":14115,"position":3},"title":"outline-width","date":"August 10, 2021","format":false,"excerpt":"The outline-width CSS property specifies the thickness of an element's outline. What\u2019s an outline? An outline is a line that is drawn around elements \u2014 outside the border edge \u2014 that is used for accessibility or decoration purposes when that element is in focus. button:focus { outline-width: 5px; } We\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":154816,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-file-input-styling-webkitblink\/","url_meta":{"origin":14115,"position":4},"title":"Custom File Input Styling","date":"October 31, 2013","format":false,"excerpt":"If you're interested in Webkit\/Blink\/Chrome specific styling, there is a proprietary pseudo element to hide, and then use an also non-standard psudeo-on-an-input: <input class=\"custom-file-input\" type=\"file\"> .custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px\u2026","rel":"","context":"In \"file input\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7035,"url":"https:\/\/css-tricks.com\/snippets\/css\/picross-style-buttons\/","url_meta":{"origin":14115,"position":5},"title":"Picross Style Buttons","date":"August 10, 2010","format":false,"excerpt":"As in, the game PICROSS3D. CSS3 Technique \u00a0 Button Button Button \u00a0 .btn { color: white; font-family: Helvetica, Arial, Sans-Serif; font-size: 20px; text-decoration: none; text-shadow: -1px -1px 1px #616161; position: relative; padding: 15px 30px; -webkit-box-shadow: 5px 5px 0 #666; -moz-box-shadow: 5px 5px 0 #666; -webkit-transition: all 0.3s ease; -moz-transition: all\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14115"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14115"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14115\/revisions"}],"predecessor-version":[{"id":376714,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14115\/revisions\/376714"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=14115"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}