{"id":352082,"date":"2021-09-17T15:49:39","date_gmt":"2021-09-17T22:49:39","guid":{"rendered":"https:\/\/css-tricks.com\/?p=352082"},"modified":"2021-09-17T15:49:42","modified_gmt":"2021-09-17T22:49:42","slug":"designing-beautiful-shadows-in-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/designing-beautiful-shadows-in-css\/","title":{"rendered":"Designing Beautiful Shadows in CSS"},"content":{"rendered":"\n

My favorite kind of blog post is when someone takes a subject that I\u2019ve spent all of five minutes considering and then says\u2014no!\u2014this is an enormous topic worthy of a dissertation. Look at all the things you can do with this tiny CSS property!<\/p>\n\n\n\n

I was reminded of this when I spotted this post by Josh Comeau about designing beautiful shadows in CSS: <\/p>\n\n\n\n\n\n\n\n

In my humble opinion, the best websites and web applications have a tangible \u201creal\u201d quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient.<\/p>

When I look around the web, though, it’s clear that most shadows aren’t as rich as they could be. The web is covered in fuzzy grey boxes that don’t really look much like shadows.<\/p><\/blockquote>\n\n\n\n

Josh shows the regular old boring shadow approaches and then explores all the ways to improve and optimize them into shadows with real depth. It all comes down to taking a closer look color and exploring the box-shadow<\/code> CSS property. And speaking of depth, Rob O’Leary’s “Getting Deep Into Shadows”<\/a> is another comprehensive look at shadows. <\/p>\n\n\n\n

I had also completely forgotten about filter: drop-shadow<\/code>; which is particularly useful on adding shadows to images that you want to throw onto a page. Great stuff all round.<\/p>\n","protected":false},"excerpt":{"rendered":"

My favorite kind of blog post is when someone takes a subject that I\u2019ve spent all of five minutes considering and then says\u2014no!\u2014this is an enormous topic worthy of a dissertation. Look at all the things you can do with this tiny CSS property! I was reminded of this when I spotted this post by […]<\/p>\n","protected":false},"author":223806,"featured_media":352108,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"Josh Comeau: Designing Beautiful Shadows in CSS","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[832],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-15-at-3.50.32-PM.png?fit=1338%2C668&ssl=1","jetpack-related-posts":[{"id":334324,"url":"https:\/\/css-tricks.com\/getting-deep-into-shadows\/","url_meta":{"origin":352082,"position":0},"title":"Getting Deep Into Shadows","date":"February 22, 2021","format":false,"excerpt":"Let\u2019s talk shadows in web design. Shadows add texture, perspective, and emphasize the dimensions of objects. In web design, using light and shadow can add physical realism and can be used to make rich, tactile interfaces. Take the landing page below. It is for cycling tours in Iceland. Notice the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/shadow-light-sources.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5080,"url":"https:\/\/css-tricks.com\/dont-use-black-for-shadows\/","url_meta":{"origin":352082,"position":1},"title":"Don’t Use Black for Shadows","date":"December 18, 2009","format":false,"excerpt":"That is, \"don't use black for shadows over colored backgrounds.\" This is because shadows in real life are not black. They are darkened versions of whatever they sit on top of, because there is less light. Or, am I whack?","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":339742,"url":"https:\/\/css-tricks.com\/creating-colorful-smart-shadows\/","url_meta":{"origin":352082,"position":2},"title":"Creating Colorful, Smart Shadows","date":"May 4, 2021","format":false,"excerpt":"A bona fide CSS trick from Kirupa Chinnathambi here. To match a colored shadow with the colors in the background-image of an element, you inherit the background in a pseudo-element, kick it behind the original, then blur and filter it. .colorfulShadow { position: relative; } .colorfulShadow::after { content: \"\"; width:\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/Screen-Shot-2021-04-30-at-11.43.03-AM.png?fit=834%2C596&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":358926,"url":"https:\/\/css-tricks.com\/shadow-palette-generator\/","url_meta":{"origin":352082,"position":3},"title":"Shadow Palette Generator","date":"December 13, 2021","format":false,"excerpt":"Josh's Shadow Palette Generator is a fantastic tool. The premise is that box-shadow pretty much always looks better when there are multiple layered shadows that are a bit tinted. It reminds me of how gradients almost always look better when eased. The generator does that, but also does three levels\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/preview-1.webp?fit=1200%2C636&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":352754,"url":"https:\/\/css-tricks.com\/scroll-shadows-with-javascript\/","url_meta":{"origin":352082,"position":4},"title":"Scroll Shadows With JavaScript","date":"October 5, 2021","format":false,"excerpt":"Scroll shadows are when you can see a little inset shadow on elements if (and only if) you can scroll in that direction. It's just good UX. You can actually pull it off in CSS, which I think is amazing and one of the great CSS tricks. Except... it just\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Screen_Shot_2021-09-05_at_9.52.01_AM.webp?fit=1200%2C920&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367270,"url":"https:\/\/css-tricks.com\/scroll-shadows-pure-css-parallax-game-back-on\/","url_meta":{"origin":352082,"position":5},"title":"Scroll Shadows? Pure CSS Parallax? Game Back On.","date":"July 29, 2022","format":false,"excerpt":"Chris calls scroll shadows one his favorite CSS-Tricks of all time. Lea Verou popularized the pure CSS approach using four layered background gradients with some clever background-attachment magic. The result is a slick scrolling interaction that gives users a hint that additional content is available in a scrollable container. CodePen\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/smooth-scroll.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/352082"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=352082"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/352082\/revisions"}],"predecessor-version":[{"id":352107,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/352082\/revisions\/352107"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/352108"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=352082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=352082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=352082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}