Hello everyone, in this post we will learn how to create different CSS box-shadow. CSS has a lot of properties and by using them we can create the shadows of the boxes. In the last post, we created a Glassmorphism in Html and CSS design. So, in this post, our concern is to teach you how to create shadows using HTML and CSS.
For the box, shadows click here.
CSS box-shadow:
As you can see in the image we have created different shadows for boxes. Every user has a different need and according to the product, we have to use different box shadows.
We have created 20 different shadows for boxes. These shadows are created using
CSS only. CSS has a lot of properties and by using them we have created the shadows for our boxes.
You might like it:
These shadows can be used with images, boxes, text boxes, and much more things. If you like them and if you want to learn how to create these types of shadows for yourself as well then you are in right place. We will teach you how to create this type of shadow using CSS properties only. So, let’s do it:
How to create CSS box-shadow?
Shadows will be created using two languages CSS and CSS. These are front-end languages and we will only use them to create shadows. We will create them in 3 steps and if you wanna create them then follow these steps.
Source code of Html:
It is a markup language and we use it to create the shape of our project. It helps us to create the skeleton of websites. We have also created our box shadows with the help of HTML and later we designed them using CSS. The html code for shadows is given below and you can use it in your newly created Html file. Create an HTML file and name it shadows.html and don’t forget to write .html at the end of the file name.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <title>CSS box-shadow - FantacyDesigns</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="box shadow1">Shadow 1</div> <div class="box shadow2">Shadow 2</div> <div class="box shadow3">Shadow 3</div> <div class="box shadow4">Shadow 4</div> <div class="box shadow5">Shadow 5</div> <div class="box shadow6">Shadow 6</div> <div class="box shadow7">Shadow 7</div> <div class="box shadow8">Shadow 8</div> <div class="box shadow9">Shadow 9</div> <div class="box shadow10">Shadow 10</div> <div class="box shadow11">Shadow 11</div> <div class="box shadow12">Shadow 12</div> <div class="box shadow13">Shadow 13</div> <div class="box shadow14">Shadow 14</div> <div class="box shadow15">Shadow 15</div> <div class="box shadow16">Shadow 16</div> <div class="box shadow17">Shadow 17</div> <div class="box shadow18">Shadow 18</div> <div class="box shadow19">Shadow 19</div> <div class="box shadow20">Shadow 20</div> </div> <footer class="copy"> <p> <a href="https://fantacydesigns.com/" title="Free HTML CSS & JS Code">The FantacyDesigns Code</a> </p> </footer> </body> </html> |
Source code of CSS box-shadow:
CSS is also known as a markup language and use it to design our websites. It is a front-end language that we use to design our websites. On websites, we use shadows as well. So, shadows are part of the website. So, the CSS code for shadows is given below here. Create file shadows. CSS and link it with an Html file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
@import url("https://fonts.googleapis.com/css?family=Titillium+Web&display=swap"); body { margin: 0; font-family: "Titillium Web", sans-serif; } .container { margin: 40px; display: grid; grid-auto-columns: 1fr; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr; gap: 40px 40px; grid-template-areas: ". . . . ."; } .container .box { height: 150px; padding: 1em; justify-content: center; align-items: center; display: flex; align-content: stretch; } .shadow1 { box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; } .shadow2 { box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; } .shadow3 { box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } .shadow4 { box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px; } .shadow5 { box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; } .shadow6 { box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; } .shadow7 { box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px; } .shadow8 { box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; } .shadow9 { box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px; } .shadow10 { box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; } .shadow11 { box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; } .shadow12 { box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; } .shadow13 { box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; } .shadow14 { box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; } .shadow15 { box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; } .shadow16 { box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; } .shadow17 { box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; } .shadow18 { box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; } .shadow19 { box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; } .shadow20 { box-shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px; } footer { background: #1dbf73; position: relative; bottom: 0; width: 100%; } footer p { padding: 10px; margin-bottom: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-content: stretch; align-items: center; } footer p a { color: #000; } |
Download source code:
We have created a source code file and in this file the code of HTML and CSS is available. As we are focusing on learning so, newbies find it difficult to copy this code and paste this code. They also have to change the file, link the files, and much more things. So, they find it difficult and for those, we are providing the source code file.
Task and Conclusion:
Shadows are used to make objects more attractive. Shadow can be used with different objects like images, boxes, buttons, headers,s and much more. Now it’s your job to add these shadows with different objects on your web page. Add the shadow with images, buttons, boxes, and other web page objects. It will make your design awesome and unique on the web page.
I guess it was a helpful post for you and you gain some knowledge from it.
Thanks for reading this article.
Download Source CodeClick to Download
