CSS | Shadow Effect
The shadow effect property in CSS is used to add text and images shadow in HTML document.
Text Shadow: The CSS text-shadow property is used to display the text with shadow. This property holds the pixel length, breadth, and width of the shadow and the color of the shadow.
Syntax:
Text-shadow: 3px 3px 3px green;
Example:
<!DOCTYPE html> <html> <head> <title>text-shadow property</title> <style> h1 { color: green; text-shadow: 3px 3px 3px lightgreen; } </style> </head> <body> <h1>Geeks For Geeks | A computer Science portal for Geeks</h1> </body> </html> |
chevron_right
filter_none
Output:
TextBox Shadow: The CSS boxShadow property applies shadow to the text box. This property hold the pixel length, breadth, and width of the shadow and the color of the shadow.
Syntax:
boxShadow: 3px 3px 3px green;
Example:
<!DOCTYPE html> <html> <head> <title>box shadow property</title> <style> #Gfg { width: 220px; height: 50px; background-color: green; color: white; } </style> <script> // function that show Shadow Effect. function Shadow() { document.getElementById("Gfg").style.boxShadow = "5px 5px 5px gray"; } </script> </head> <body> <button onclick = "Shadow()">Click to see Shadow</button> <div id = "Gfg"> <h1>GeeksforGeeks</h1> </div> </body> </html> |
chevron_right
filter_none
Output:
Recommended Posts:
- CSS | box-shadow Property
- Parallax scrolling effect using CSS.
- Drop shadow for PNG image using CSS
- How to add a box-shadow on one side of an element using CSS?
- CSS | drop-shadow() Function
- CSS | text-shadow Property
- jQuery | Effect show() Method
- jQuery | Effect fadeOut() Method
- How to do box shadow with progress bar style using bootstrap?
- How to create fade-in effect on page load using CSS ?
- How to style icon color, size, and shadow by using CSS ?
- How to detect operating system on the client machine using JavaScript ?
- What is the difference between children and childNodes in JavaScript?
- 5 Must Have Tools For Web Application Penetration Testing
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
