Css Shadow

What is Shadow in CSS?

Using the property box-shadow we can create different shadows for elements.

It is shadows that give the volume-sense, depth and dimension, as a result, the visual appeal of the web page components is improved.

Basic Box Shadow:

On this case, we will demonstrate the horizontal shift with a value of 5px, the vertical shift with a value of 5px, the blur radius will be of 10px, the color will be #888888.

                          
                            div {
                                box-shadow: 5px 5px 10px #888888; /* Horizontal offset, vertical offset, blur radius, color */
                            }

Inset Box Shadow:

This example adds an inset box shadow to a button, creating a pressed or inset effect.

                          
                            button {
                                box-shadow: inset 0 0 5px #3498db; /* Inset shadow with no offset, 5px blur radius, and color */
                            }

Multiple Shadows:

This example adds two box shadows to a div, creating a layered effect.

                          
                            div {
                                box-shadow: 5px 5px 10px #888888, -5px -5px 10px #ccc; /* Two shadows applied */
                            }

Text Shadow:

This example adds a text shadow to an h1 element, creating a shadow behind the text.

                          
                            h1 {
                                text-shadow: 2px 2px 4px #888888; /* Horizontal offset, vertical offset, blur radius, color */
                            }

Hover Effect with Box Shadow:

This example adds a smooth transition to the box shadow of a button and changes the box shadow on hover.

                          
                            button {
                                transition: box-shadow 0.3s ease; /* Add a smooth transition for the box shadow */
                            }
                            
                            button:hover {
                                box-shadow: 0 0 15px #3498db; /* Change box shadow on hover */
                            }

Image Container with Drop Shadow:

This example adds a drop shadow to an image container using rgba for a semi-transparent effect.

                          
                            .img-container {
                                box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* Drop shadow for an image container */
                            }

Card with Elevation:

This example adds an elevation effect to a card element with a subtle box shadow.

                          
                            .card {
                                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Elevation effect for a card */
                            }

Custom Shape Shadow:

This sample helps you to attain 3D effect of sound that comes from a sphere.

                          
                            .circle {
                                width: 100px;
                                height: 100px;
                                background-color: #3498db;
                                border-radius: 50%;
                                box-shadow: 0 0 10px rgba(52, 152, 219, 0.7); /* Shadow for a circular element */
                            }