{"id":233,"date":"2014-04-19T01:31:22","date_gmt":"2014-04-19T01:31:22","guid":{"rendered":"http:\/\/www.cssportal.com\/blog\/?p=233"},"modified":"2024-02-28T23:29:07","modified_gmt":"2024-02-28T23:29:07","slug":"10-image-shadows-using-css","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/10-image-shadows-using-css\/","title":{"rendered":"10 Image Shadows Using CSS"},"content":{"rendered":"<p>Today we have put together a small collection of 10 box shadows that you can use to give your images a bit more flair. The image shadows are created using the <a href=\"http:\/\/www.cssportal.com\/css-properties\/box-shadow.php\">box-shadow property<\/a> and with most examples we also use the :before and :after pseudo elements.<br \/>\n<!--more--><br \/>\nWith all of the examples below, I have added a border with padding around the image to make the shadow stand out more, the CSS code used the the border is as follows:<\/p>\n<pre class=\"language-css\"><code>.imgborder {\r\n   display:inline-block;\r\n   position:relative;\r\n   border:1px solid #ccc;\r\n   padding:5px;\r\n   background:#f2f2f2;\r\n   margin-bottom:30px;\r\n}\r\n<\/code><\/pre>\n<h4>Image Shadow 1<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2014\/04\/s1-300x205.png\" alt=\"Image Shadow 1\" width=\"300\" height=\"205\" class=\"aligncenter size-medium wp-image-241\" \/><\/p>\n<pre class=\"language-css\"><code>.s1 {\r\n   -webkit-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);\r\n   -moz-box-shadow: 0 28px 16px -26px rgba(0, 0, 0);\r\n   box-shadow: 0 28px 16px -26px rgba(0, 0, 0);\r\n}\r\n<\/code><\/pre>\n<hr>\n<h4>Image Shadow 2<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2014\/04\/s2-300x210.png\" alt=\"Image Shadow 2\" width=\"300\" height=\"210\" class=\"aligncenter size-medium wp-image-242\" \/><\/p>\n<pre class=\"language-css\"><code>.s2:before, .s2:after {\r\n   position:absolute;\r\n   z-index:-2;\r\n   content:\"\";\r\n}\r\n.s2:before {\r\n   top:2%;\r\n   bottom:2%;\r\n   left:2%;\r\n   right:2%;\r\n   -webkit-border-radius:15%;\t\t\r\n   -moz-border-radius:15%;\r\n   border-radius:15%;\r\n   -webkit-box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7);\r\n   -moz-box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7);\r\n   box-shadow:0px -1px 25px rgba(0,0,0,0.5), 0px 1px 25px rgba(0,0,0,0.7);\r\n}\r\n<\/code><\/pre>\n<hr>\n<h4>Image Shadow 3<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2014\/04\/s3-300x216.png\" alt=\"Image Shadow 3\" width=\"300\" height=\"216\" class=\"aligncenter size-medium wp-image-243\" \/><\/p>\n<pre class=\"language-css\"><code>.s3:after {\r\n   content:\"\";\r\n   position: absolute;\r\n   top:100px;right:0;bottom:0;left: 0;\r\n   z-index:-2;\t\t\t\r\n   -webkit-box-shadow:0px 250px 15px -35px rgba(0,0,0,.25);\r\n   -moz-box-shadow:0px 250px 15px -35px rgba(0,0,0,.25);\r\n   box-shadow:0px 250px 15px -35px rgba(0,0,0,.25);\r\n   -webkit-border-radius:50%;\r\n   -moz-border-radius:50%;\r\n   border-radius:50%;\r\n   transform:scaleY(.3);\r\n   -webkit-transform:scaleY(.3);\r\n   -moz-transform:scaleY(.3);\r\n   -ms-transform:scaleY(.3);\r\n   -o-transform:scaleY(.3);\r\n}\r\n<\/code><\/pre>\n<hr>\n<h4>Image Shadow 4<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2014\/04\/s4-300x209.png\" alt=\"Image Shadow 4\" width=\"300\" height=\"209\" class=\"aligncenter size-medium wp-image-234\" \/><\/p>\n<pre class=\"language-css\"><code>.s4:before, .s4:after {\r\n   content:\"\";\r\n   position:absolute; \r\n   z-index:-1;\r\n   -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);\r\n   -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);\r\n   box-shadow:0 0 20px rgba(0,0,0,0.8);\r\n   top:50%;\r\n   bottom:0;\r\n   left:10px;\r\n   right:10px;\r\n   -moz-border-radius:100px \/ 10px;\r\n   border-radius:100px \/ 10px;\r\n}\r\n<\/code><\/pre>\n<hr>\n<h4>Image Shadow 5<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2014\/04\/s5-300x175.png\" alt=\"Image Shadow 5\" width=\"300\" height=\"175\" class=\"aligncenter size-medium wp-image-235\" \/><\/p>\n<pre class=\"language-css\"><code>.s5:before {\r\n   position: absolute;\r\n   right: 80px;\r\n   bottom: 5px;\r\n   width: 100%;\r\n   height: 37%;\r\n   border-radius: 0 10% 0 0;\r\n   z-index: -1;\r\n   content: \"\";\r\n   box-shadow: 86px 0 17px rgba(0,0,0,0.33);\r\n   -webkit-transform: skew(-36deg);\r\n   -moz-transform: skew(-36deg);\r\n   -ms-transform: skew(-36deg);\r\n   -o-transform: skew(-36deg);\r\n   transform: skew(-36deg);\r\n   -webkit-transform-origin: 0% 100%;\r\n   -moz-transform-origin: 0% 100%;\r\n   -ms-transform-origin: 0% 100%;\r\n   -o-transform-origin: 0% 100%;\r\n   transform-origin: 0% 100%;\r\n}\r\n<\/code><\/pre>\n<hr>\n<h4>Image Shadow 6<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2014\/04\/s6-300x201.png\" alt=\"Image Shadow 6\" width=\"300\" height=\"201\" class=\"aligncenter size-medium wp-image-236\" \/><\/p>\n<pre class=\"language-css\"><code>.s6 {\r\n   -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);\r\n   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);\r\n   box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);\r\n}\r\n.s6:before, .s6:after {\r\n   content:\"\";\r\n   position:absolute; \r\n   z-index:-1;\r\n   -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);\r\n   -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);\r\n   box-shadow:0 0 20px rgba(0,0,0,0.8);\r\n   top:10px;\r\n   bottom:10px;\r\n   left:0;\r\n   right:0;\r\n   -moz-border-radius:100px \/ 10px;\r\n   border-radius:100px \/ 10px;\r\n} \r\n.s6:after {\r\n   right:10px; \r\n   left:auto;\r\n   -webkit-transform:skew(8deg) rotate(3deg); \r\n   -moz-transform:skew(8deg) rotate(3deg);     \r\n   -ms-transform:skew(8deg) rotate(3deg);     \r\n   -o-transform:skew(8deg) rotate(3deg); \r\n   transform:skew(8deg) rotate(3deg);\r\n}\r\n<\/code><\/pre>\n<hr>\n<h4>Image Shadow 7<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2014\/04\/s7-300x209.png\" alt=\"Image Shadow 7\" width=\"300\" height=\"209\" class=\"aligncenter size-medium wp-image-237\" \/><\/p>\n<pre class=\"language-css\"><code>.s7:before {\r\n   z-index: -1;\r\n   position: absolute;\r\n   content: \"\";\r\n   width: 98%;\r\n   height: 96%;\r\n   bottom: 0px;\r\n   right: 0px;\r\n   background: #eee;\r\n   border: 1px solid #ccc;\r\n   box-shadow: 1px 1px 8px rgba(0,0,0,0.1);\r\n   -webkit-transform: skew(2deg,2deg) translate(3px,5px);\r\n   -moz-transform: skew(2deg,2deg) translate(3px,5px);\r\n   -ms-transform: skew(2deg,2deg) translate(3px,5px);\r\n   -o-transform: skew(2deg,2deg) translate(3px,5px);\r\n   transform: skew(2deg,2deg) translate(3px,5px);\r\n}\r\n.s7:after {\r\n   z-index: -1;\r\n   position: absolute;\r\n   content: \"\";\r\n   width: 98%;\r\n   height: 96%;\r\n   bottom: 0px;\r\n   right: 0px;\r\n   background: #eee;\r\n   border: 1px solid #ccc;\r\n   box-shadow: 0 0 8px rgba(0,0,0,0.1);\r\n   -webkit-transform: skew(2deg,2deg) translate(1px,0px);\r\n   -moz-transform: skew(2deg,2deg) translate(1px,0px);\r\n   -ms-transform: skew(2deg,2deg) translate(1px,0px);\r\n   -o-transform: skew(2deg,2deg) translate(1px,0px);\r\n   transform: skew(2deg,2deg) translate(1px,0px);\r\n}\r\n<\/code><\/pre>\n<hr>\n<h4>Image Shadow 8<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2014\/04\/s8-300x223.png\" alt=\"Image Shadow 8\" width=\"300\" height=\"223\" class=\"aligncenter size-medium wp-image-238\" \/><\/p>\n<pre class=\"language-css\"><code>.s8:before, .s8:after {\r\n   z-index: -1;\r\n   position: absolute;\r\n   content: \"\";\r\n   bottom: 25px;\r\n   left: 10px;\r\n   width: 50%;\r\n   top: 80%;\r\n   max-width:300px;\r\n   background: #777;\r\n   -webkit-box-shadow: 0 35px 20px #777;\r\n   -moz-box-shadow: 0 35px 20px #777;\r\n   box-shadow: 0 35px 20px #777;\r\n   -webkit-transform: rotate(-8deg);\r\n   -moz-transform: rotate(-8deg);\r\n   -o-transform: rotate(-8deg);\r\n   -ms-transform: rotate(-8deg);\r\n   transform: rotate(-8deg);\r\n}\r\n.s8:after {\r\n   -webkit-transform: rotate(8deg);\r\n   -moz-transform: rotate(8deg);\r\n   -o-transform: rotate(8deg);\r\n   -ms-transform: rotate(8deg);\r\n   transform: rotate(8deg);\r\n   right: 10px;\r\n   left: auto;\r\n}\r\n<\/code><\/pre>\n<hr>\n<h4>Image Shadow 9<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2014\/04\/s9-300x203.png\" alt=\"Image Shadow 9\" width=\"300\" height=\"203\" class=\"aligncenter size-medium wp-image-239\" \/><\/p>\n<pre class=\"language-css\"><code>.s9:before, .s9:after {\r\n   z-index: -1;\r\n   position: absolute;\r\n   content: \"\";\r\n   bottom: 15px;\r\n   left: 10px;\r\n   width: 50%;\r\n   top: 80%;\r\n   max-width:300px;\r\n   background: #777;\r\n   -webkit-box-shadow: 0 15px 10px #777;\r\n   -moz-box-shadow: 0 15px 10px #777;\r\n   box-shadow: 0 15px 10px #777;\r\n   -webkit-transform: rotate(-3deg);\r\n   -moz-transform: rotate(-3deg);\r\n   -o-transform: rotate(-3deg);\r\n   -ms-transform: rotate(-3deg);\r\n   transform: rotate(-3deg);\r\n}\r\n.s9:after {\r\n   -webkit-transform: rotate(3deg);\r\n   -moz-transform: rotate(3deg);\r\n   -o-transform: rotate(3deg);\r\n   -ms-transform: rotate(3deg);\r\n   transform: rotate(3deg);\r\n   right: 10px;\r\n   left: auto;\r\n}\r\n<\/code><\/pre>\n<hr>\n<h4>Image Shadow 10<\/h4>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.cssportal.com\/blog\/wp-content\/uploads\/2014\/04\/s10-300x208.png\" alt=\"Image Shadow 10\" width=\"300\" height=\"208\" class=\"aligncenter size-medium wp-image-240\" \/><\/p>\n<pre class=\"language-css\"><code>.s10:after {\r\n   z-index: -1;\r\n   position: absolute;\r\n   content: \"\";\r\n   bottom: 15px;\r\n   right: 10px;\r\n   left: auto;\r\n   width: 50%;\r\n   top: 80%;\r\n   max-width:300px;\r\n   background: #777;\r\n   -webkit-box-shadow: 0 15px 10px #777;\r\n   -moz-box-shadow: 0 15px 10px #777;\r\n   box-shadow: 0 15px 10px #777;\r\n   -webkit-transform: rotate(3deg);\r\n   -moz-transform: rotate(3deg);\r\n   -o-transform: rotate(3deg);\r\n   -ms-transform: rotate(3deg);\r\n   transform: rotate(3deg);\r\n}<\/code><\/pre>\n<p>All of the examples above are saved png images with the shadow, to view examples of the images with the CSS code applied, please check out the example page <a href=\"https:\/\/www.cssportal.com\/examples\/image-shadow.php\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today we have put together a small collection of 10 box shadows that you can use to give your images a bit more flair. The image shadows are created using the box-shadow property and with most examples we also use the :before and :after pseudo elements.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-233","post","type-post","status-publish","format-standard","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/233","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=233"}],"version-history":[{"count":5,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/233\/revisions"}],"predecessor-version":[{"id":574,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/233\/revisions\/574"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}