CSS Properties: How set the inset shadow?

Last update on February 20 2024 12:25:58 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type as HTML -->
<html><!-- Root element of the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<title>How set the inset shadow</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
div { /* Defines a CSS rule for all div elements */
width: 200px; /* Sets the width of the div element to 200 pixels */
height: 100px; /* Sets the height of the div element to 100 pixels */
border: 3px solid #FF0000; /* Sets the border properties of the div element to a 3-pixel wide solid red border */
background-color: #4364FF; /* Sets the background color of the div element to a shade of blue (#4364FF) */
box-shadow: 0px 0px 10px 20px #22CC64 inset; /* Sets the shadow effect for the div element with a horizontal offset of 0 pixels, vertical offset of 0 pixels, blur radius of 10 pixels, spread radius of 20 pixels, and green color (#22CC64) with inset shadow */
}
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<p>w3resource Tutorial</p><!-- Displays a paragraph with the text "w3resource Tutorial" -->
<div>Box-shadow inset</div><!-- Displays a div element with the text "Box-shadow inset" and an inset shadow effect -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->

Explanation:

The width: 200px; CSS property sets the width of the div element to 200 pixels.
The height: 100px; CSS property sets the height of the div element to 100 pixels.
The border: 3px solid #FF0000; CSS property sets the border properties of the div element to a 3-pixel wide solid red border.
The background-color: #4364FF; CSS property sets the background color of the div element to a shade of blue (#4364FF).
The box-shadow: 0px 0px 10px 20px #22CC64 inset; CSS property sets the shadow effect for the div element with a horizontal offset of 0 pixels, vertical offset of 0 pixels, blur radius of 10 pixels, spread radius of 20 pixels, and green color (#22CC64) with an inset shadow effect.

Live Demo:

See the Pen box-shadow-inset-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page