{"id":512,"date":"2020-07-12T04:29:32","date_gmt":"2020-07-12T04:29:32","guid":{"rendered":"https:\/\/www.cssportal.com\/blog\/?p=512"},"modified":"2024-02-28T23:25:53","modified_gmt":"2024-02-28T23:25:53","slug":"box-shadow-generator-updated","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/box-shadow-generator-updated\/","title":{"rendered":"Box Shadow Generator &#8211; Updated"},"content":{"rendered":"<p>We have just finished updating our popular CSS box shadow generator. You can now add and view multiple shadows to an element and as you could always do previously, change the blur, spread, color (now with opacity) and x and y offsets.<br \/>\n<!--more--><br \/>\nCheck out the new <a href=\"https:\/\/www.cssportal.com\/css3-box-shadow-generator\/\">CSS box shadow generator<\/a> now by clicking on the link.<\/p>\n<p>Just a few examples that can be made by using the generator are:<\/p>\n<style>\n.box {height:100px;\nline-height:100px;\ntext-align:center;\nmargin:20px;\nborder:1px solid #ccc;\nbackground:#f2f2f2;\n}\n.box1 {box-shadow: -15px -15px 2px -5px rgba(160,82,45,.5),\n-15px 15px 2px -5px rgba(0,255,255,.5),\n15px -15px 2px -5px rgba(255,0,0,.5),\n15px 15px 2px -5px rgba(255,255,0,.5);\n}\n.box2 {\nbox-shadow: 0 1px 4px rgba(0, 0, 0, .3),\n-23px 0 20px -23px rgba(0, 0, 0, .8),\n23px 0 20px -23px rgba(0, 0, 0, .8),\ninset 0 0 40px rgba(0, 0, 0, .1);\n}\n.box3 {\nbox-shadow: -20px 20px 0 -17px #fff,\n20px -20px 0 -17px #fff,\n20px 20px 0 -20px #c27153,\n0 0 0 2px #c27153;\n}\n.box4 {\nbox-shadow: 0 0 0 1px #CCCCCC,\n0 -20px 0 -10px #00FFFF,\n20px 0 0 -10px #DC143C,\n0 20px 0 -10px #006400,\n-20px 0 0 -10px #FF00FF;\n}\n<\/style>\n<div class=\"box box1\">Example 1<\/div>\n<div class=\"box box2\">Example 2<\/div>\n<div class=\"box box3\">Example 3<\/div>\n<div class=\"box box4\">Example 4<\/div>\n<p>You can be as creative as you like, there are just so many possibilities of different shadows that can be made with the new generator, have fun.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have just finished updating our popular CSS box shadow generator. You can now add and view multiple shadows to an element and as you could always do previously, change the blur, spread, color (now with opacity) and x and y offsets.<\/p>\n","protected":false},"author":1,"featured_media":671,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-512","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=512"}],"version-history":[{"count":1,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/512\/revisions"}],"predecessor-version":[{"id":513,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/512\/revisions\/513"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/671"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=512"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=512"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}