Beautiful CSS box-shadow | 100+ CSS box-shadow 

 Welcome🎉 to Code With Random blog. In this blog, we learn how to create a CSS box shadow. We use HTML & CSS  for CSS box-shadow . Hope you enjoy our blog so let’s start with a basic HTML structure for the CSS box-shadow. 

 

In CSS, the box-shadow feature adds shadow effects around the element, which is essential for creating aesthetically beautiful websites. Compared to adding graphics and backdrop effects made by graphical editors like Photoshop or Figma, it is a much more useful and accessible choice.

HTML Code For Box-Shadow

<div class="box" style="--shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;"></div>
<div class="box" style="--shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;"></div>
<div class="box" style="--shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, rgb(51, 51, 51) 0px 0px 0px 3px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;"></div>
<div class="box" style="--shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;"></div>
<div class="box" style="--shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;"></div>
<div class="box" style="--shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;"></div>
<div class="box" style="--shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;"></div>
<div class="box" style="--shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;"></div>
<div class="box" style="--shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;"></div>
<div class="box" style="--shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;"></div>
<div class="box" style="--shadow: rgb(38, 57, 77) 0px 20px 30px -10px;"></div>
<div class="box" style="--shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;"></div>
<div class="box" style="--shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;"></div>
<div class="box" style="--shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;"></div>
<div class="box" style="--shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;"></div>
<div class="box" style="--shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;"></div>
<div class="box" style="--shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;"></div>
<div class="box" style="--shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;"></div>
<div class="box" style="--shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;"></div>
<div class="box" style="--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;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;"></div>
<div class="box" style="--shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;"></div>
<div class="box" style="--shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;"></div>
<div class="box" style="--shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;"></div>
<div class="box" style="--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;"></div>
<div class="box" style="--shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;"></div>
<div class="box" style="--shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;"></div>
<div class="box" style="--shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;"></div>
<div class="box" style="--shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;"></div>
<div class="box" style="--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;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;"></div>
<div class="box" style="--shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;"></div>
<div class="box" style="--shadow: blue 0px 0px 0px 2px inset, rgb(255, 255, 255) 10px -10px 0px -3px, rgb(31, 193, 27) 10px -10px, rgb(255, 255, 255) 20px -20px 0px -3px, rgb(255, 217, 19) 20px -20px, rgb(255, 255, 255) 30px -30px 0px -3px, rgb(255, 156, 85) 30px -30px, rgb(255, 255, 255) 40px -40px 0px -3px, rgb(255, 85, 85) 40px -40px;"></div>
<div class="box" style="--shadow: rgb(85, 91, 255) 0px 0px 0px 3px, rgb(31, 193, 27) 0px 0px 0px 6px, rgb(255, 217, 19) 0px 0px 0px 9px, rgb(255, 156, 85) 0px 0px 0px 12px, rgb(255, 85, 85) 0px 0px 0px 15px;"></div>
<div class="box" style="--shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;"></div>
<div class="box" style="--shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;"></div>
<div class="box" style="--shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;"></div>
<div class="box" style="--shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;"></div>
<div class="box" style="--shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;"></div>
<div class="box" style="--shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"></div>
<div class="box" style="--shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;"></div>
<div class="box" style="--shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;"></div>
<div class="box" style="--shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;"></div>
<div class="box" style="--shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;"></div>
<div class="box" style="--shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.15) 0px 3px 3px 0px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.4) 0px 30px 90px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;"></div>
<div class="box" style="--shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.9) 0px 0px 0px 1px;"></div>
<div class="box" style="--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;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 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;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;"></div>
<div class="box" style="--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;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgb(209, 213, 219) 0px 0px 0px 1px inset;"></div>
<div class="box" style="--shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;"></div>
<div class="box" style="--shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;"></div>
<div class="box" style="--shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;"></div>

We will be utilising the div tag with class box to construct the box shadow structure. We will design the structure for adding the box shadow inside our various boxes using the same div tag with inline styling for adding shadow.

We will apply various shadows using the shadow property to 100 boxes, each of which will have a unique outset position.

There is all HTML code for the CSS box-shadow. Now, you can see output without CSS, then we write CSS for the CSS box-shadow.

Output

 

this is a blank demo with html tag(inline css)

CSS Code For Box-Shadow

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    min-height: 100vh;
    font-family: "Exo", Arial, sans-serif;
    background-color: #fff;
    color: #fff;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 30px;
    padding: 30px;
    counter-reset: item;
}

.box {
    background-color: #fff;
    border-radius: 6px;
    min-height: 160px;
    --shadow: 1px 1px 1px 1px rgb(0 0 0 / 0.25);
    box-shadow: var(--shadow);
    counter-increment: item;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box::before {
    content: counter(item);
    display: block;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(115deg, #fc00ff, #00dbde);
    font-weight: 700;
    font-size: clamp(1.2rem, 2rem + 2vw, 3rem);
}

Step1: We will first add some fresh Google Fonts to our project. We will import the Exo font family using the Google import link. We will also use the universal tag selector to set the padding and margin to zero and the box size property to border-box.

@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Step2: We will use the minimum height property to specify the minimum height as “100vh” and the width as “100vw” using the body tag selector. Our project will make use of the exo font style. We will now set the display property to “grid” and replicate the same column in the grid template form using the grid-template-column.

body {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #fff;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: 30px;
  padding: 30px;
  counter-reset: item;
}

Step3: Our boxes will now have styling added using the class selector (.box). The border radius will be set to “6px” using the border-radius property, and the background colour will be set to white using the class selector. As of right now, we will apply styling to our box shadows by using the display property flex after inheriting the box shadow from the inline styling using the box shadow property.

.box {
  background-color: #fff;
  border-radius: 6px;
  min-height: 160px;
  --shadow: 1px 1px 1px 1px rgb(0 0 0 / 0.25);
  box-shadow: var(--shadow);
  counter-increment: item;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box::before {
  content: counter(item);
  display: block;
  -webkit-background-clip: text;
  color: transparent;
  background-image: linear-gradient(115deg, #fc00ff, #00dbde);
  font-weight: 700;
  font-size: clamp(1.2rem, 2rem + 2vw, 3rem);
}

ow we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Now we have completed our CSS section,  Here is our updated output with CSS. Hope you like the CSS box-shadow, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a CSS box-shadow using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Check out more…..