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
How to Add Shadow to Image in CSS ?
Adding shadow to an image can enhance its visual appeal and make it stand out on your webpage. In this article, we will explore various approaches to add shadow to an image using CSS. Table of Content Add Shadow on Image using box-shadow PropertyAdd Shadow on Image on HoverAdd Shadow on Image using
2 min read
How to Add Shadow to Button in CSS ?
This article will show you how to add shadow to a button using CSS. Button shadow can enhance its visual appeal and make it stand out on your webpage. This article will cover various approaches to adding shadow to a button using CSS. Table of Content Add Shadow on button using box-shadow PropertyAdd
3 min read
How to Create a Box Shadow in CSS ?
A box shadow in CSS is a visual effect that adds a shadow to an HTML element, creating a sense of depth and dimension. It is a styling technique commonly used to enhance the visual appearance of elements on a webpage. Below are the approaches to creating a box shadow in CSS: Table of Content Using b
2 min read
How to Add Text Shadow in Tailwind CSS?
Adding a text shadow in Tailwind CSS is useful for making text for creating visual effects like glows and embossed or debossed effects. Tailwind CSS does not provide text shadow utilities out of the box but it allows you to easily extend its functionality to add custom utilities. In this article, we
3 min read
How to Add CSS
Adding CSS (Cascading Style Sheets) to your HTML is essential for creating visually appealing and user-friendly web pages. In this guide, we will explore the three primary methods to link CSS to HTML documents: inline, internal, and external CSS. Each method has its advantages and best-use scenarios
3 min read
How to Add Shadow to Text using CSS?
The text-shadow property is used to add shadow to the text. The text-shadow property creates text shadows, specifying horizontal/vertical offsets, blur radius, and color for depth and emphasis. Note: We can customize text shadow by changing position, blur, and color for improved appearance and visua
1 min read
How to Add Drop Shadow in Photoshop?
Adding shadows in Photoshop is a fundamental skill for creating realistic and professional-looking images. Shadows enhance depth, dimension, and context in digital artwork, making objects appear more natural and grounded. This guide will walk you through the process of adding shadows in Photoshop, c
2 min read
How To Add Custom Box Shadow In Tailwind CSS?
Tailwind CSS is a utility-focused CSS framework. Offers a wide range of design utilities. It does include predefined shading, however, for unique design needs, you might want a custom box shadow that goes beyond the default. in this article, you will learn how to extend Tailwind's default shadow and
3 min read
How to Set Depth of Box Shadow in CSS ?
A powerful CSS box-shadow attribute may give web designs depth and dimension. Although CSS box-shadow first appears to be a straightforward property, there are many ways to use it to produce intricate shadow effects that can improve a website's aesthetic appeal and user experience. In this article,
7 min read
How to Add Tailwind CSS to HTML ?
Tailwind CSS is a utility-first framework offering pre-defined classes for rapid styling of HTML elements. It simplifies customization and accelerates web development workflows. Integration Options: CDN Integration: Quickly add Tailwind CSS via a CDN link in the <head> of your HTML.Using npm:
3 min read