The shadow effect of CSS can be achieved through three properties, namely box-shadow, text-shadow, and drop-shadow. For different needs, the CSS properties used are different.

Of course, you can use the blur(), brightness(), and opacity() of the filter to create a shadow effect if you want to generate a mapped shadow color based on the color of the element itself.

Use CSS text-shadow Property to Achieve Text Shadow Effect

The text-shadow property is used to set the text with shadow. You can set the pixel length, width, and blur distance of the shadow, as well as the color of the shadow.

<style>
h1 {
color: red;
text-shadow: 3px 5px 5px #656B79;
}
</style>
Text Shadow!

Grammar

text-shadow: h-shadow v-shadow blur color;

Please note that the text-shadow property connects one or more shadow texts. Attributes are shadows, specified every 2 or 3 length values, ​​and an optional color value separated by commas. The length of the expired is 0.

Use CSS box-shadow Property to Achieve Border Shadow Effect

The box-shadow property can apply a shadow to the text box. You can set the pixel length, width, and blur distance of the middle shadow, as well as the color of the shadow.

<style>
  div {
  width: 300px;
  height: 100px;
  background-color: red;
  box-shadow: 10px 10px 5px #888888;
  }
  </style>
  
Border Shadow!

Grammar

box-shadow: h-shadow v-shadow blur spread color inset;

Please note that the boxShadow property adds one or more drop shadows to the box. This property is a comma-separated list of shadows, each specified by 2-4 length values, an optional color value, and an optional inset keyword. The value for omitted length is 0.

Use CSS filter: drop-shadow() to Achieve Irregular Graphic Shadow Effects

In the face of regular rectangles or circles, the projection generated by box-shadow can be said to be perfect. But in the face of irregular graphics, the projection generated by box-shadow is a bit powerless. For irregular shapes, use the filter property to replace box-shadow. The drop-shadow parameter is basically the same as box-shadow.

{
  filter: drop-shadow(0px 4rpx 12rpx rgba(0, 0, 0, 0.06));
}

Grammar

filter: drop-shadow(x offset, y offset, blur size, color value);

The left-right position and the top-bottom position are numbers that specify the shadow position of the original image. The blur condition specifies how blurry the outline's shadow should be, all in px.

Please note that filter: drop-shadow() is mainly used to produce shadow effects on the outline of the non-transparent part of PNG images.