How to Add Shadow in CSS?
Last Updated :
03 Sep, 2024
Shadows in CSS can be used to create depth and visual interest by adding the effect that simulates the shadow of an element. It can be applied to both the text and block elements to enhance the design of the web pages. CSS can provide several properties to achieve different shadow effects, including box-shadow and text shadow.
Below are the two approaches to add shadow in CSS:
Box Shadow
The box-shadow property can be used to add the shadow effects to the block-level elements, such as the div and section. This property can create the effect that makes the elements appear lifted or separated from the background, which adds depth and visual interest to the web designs.
Syntax:
box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color] [inset];
Parameters:
- horizontal-offset: It can define the horizontal distance of the shadow from the element. Positive values push the shadow to the right and negative values push it to the left.
- vertical-offset: It can define the vertical distance of the shadow from the element. Positive values can push the shadow down and negative values push it up.
- blur-radius: It can control the amount of blur applied to the shadow. The higher the value then the blurred the shadow will be. If omitted then the default is 0, which means the shadow will be sharp and clear.
- spread-radius: It can define the size of the shadow. Positive values make the shadow larger, while negative values make it smaller. If omitted then the default is 0.
- Color: It can specify the color of the shadow. It can defined using the color names, hex codes, RGB, RGBA, HSLA, or HSL values.
- inset: Optional. It can change the shadow from an outer shadow to an inner shadow. If used then the shadow appears inside the element.
Example 1: This demonstrates a box with a basic shadow effect, featuring a light gray background, padding, and centered text.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Box Shadow Example</title>
<style>
.box-shadow-basic {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
padding: 20px;
text-align: center;
line-height: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="box-shadow-basic">
Basic Shadow
</div>
</body>
</html>
Output:
basic_shadowExample 2: This demonstrates a box with an inner shadow effect, featuring a light gray background, padding, and centered text.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Inner Shadow Example</title>
<style>
.box-shadow-inner {
width: 200px;
height: 100px;
background-color: #f0f0f0;
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);
padding: 20px;
text-align: center;
line-height: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="box-shadow-inner">Inner Shadow</div>
</body>
</html>
Output:
OutputText Shadow
The text-shadow property can be used to add the effects to the text elements. This property can allows to you to enhance the text readability and create the stylistic effect that make the text stand out.
Syntax:
text-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [color];
Parameters
- horizontal-offset: It can defines the horizontal distance of the shadow from the text. Positive values can be used to move the shadow to the right, and negative values can be used to move it to the left.
- vertical-offset: It can defines the vertical distance of the shadow from text. Positive values can be move the shadow down and the negative values moves it up.
- blur-radius: It can be controls the amount of the blur applied to the shadow. the higher value result in the more blurred shadow. if omitted then the default is 0, resulting in the sharp shadow.
- color: It can specifies the color of the shadow. it can be color name, hex code, RGB, RGBA, HSL or HSLA value.
Example 1: This demonstrates features text with a basic shadow effect, styled with a dark gray color and a soft shadow offset for visual depth.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Text Shadow Example</title>
<style>
.text-shadow-basic {
font-size: 24px;
color: #333;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<p class="text-shadow-basic">Basic Text Shadow</p>
</body>
</html>
Output:
OutputExample 2: This demonstrates text with a multi-layer shadow effect, combining a subtle dark shadow and a glowing blue shadow for enhanced visual impact.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Multi-layer Text Shadow Example</title>
<style>
.text-shadow-multi {
font-size: 24px;
color: #333;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5),
0 0 25px rgba(0, 0, 255, 0.5);
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<p class="text-shadow-multi">Multi-layer Text Shadow</p>
</body>
</html>
Output:
OutputConclusion
CSS shadows can enhance the web design by adding the depth and visual interest. Use the box-shadow for creating the depth around elements and text-shadow for highlighting the text. Both properties offer the customization for position, blur spread, and color. It can helping you achieve the various effects. Proper use of the shadows can improve the aesthetic appeal and readability of the webpage.
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read