top of page

Box-Shadow in HTML

The Box-shadow property in HTML attach more shadow in the elements, box or image.


Below are the attributed for the Box-shadow property :

  1. h-offset

  2. v-offset

  3. blur

  4. spread

  5. color

  6. inset


Below are two examples. One Example is with attributes(h-offset, v-offset, blur , color and spread)

and the second example is with attribute (inset).


Example 1:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 7px;
  box-shadow: 5px 5px ;
}
#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 4px 10px;
}
#example3 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px 10px 10px gray ;
}
#example4 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 4px 10px 10px blue;
}
</style>
</head>
<body>

<h2>Simple Shadow of the Box</h2>
<div id="example1">
  <p>The Tech Platform</p>
</div><br>
<h2>Shadow with Blur </h2>
<div id="example2">
  <p>The Tech Platform</p>
</div><br>
<h2>Spread the Blur </h2>
<div id="example3">
  <p>The Tech Platform</p>
</div><br>
<h2>When we add color </h2>
<div id="example4">
  <p>The Tech Platform</p>
</div>

</body>
</html>

Output:





Inset Property:

The Inset property in HTML changes the shadow from the outer shadow to inner shadow. See the example below to understand this property:


Example 2:

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px inset;
}

#example2 {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 5px 10px green inset;
}
</style>
</head>
<body>

<h2>Inset Property</h2>
<div id="example1">
  <p>Add shadow inside the frame or box</p>
</div><br>

<h2>Inset Property with blur</h2>
<div id="example2">
  <p>Add blurred shadow inside the box.</p>
</div>

</body>
</html>

Output:





Sofia Sondh

The Tech Platform


0 comments

Recent Posts

See All

Comments


bottom of page