How to apply box-shadow to display elements like single element to user in CSS ?

Last Updated : 31 May, 2023

In CSS, the box-shadow property allows you to add a shadow effect to an element. However, when it comes to applying box shadow to a combination of elements such as a <span> and <input>, it can be a bit tricky to get the desired effect.

In this article, we will discuss how to apply box-shadow to a <span> <input> combination so that it looks like one single element to the user. We will cover the syntax for the box-shadow property, and different approaches to applying it, and provide at least two examples with output images.

Syntax:

box-shadow: h-offset v-offset blur spread color;

h-offset: the horizontal offset of the shadow from the element
v-offset: the vertical offset of the shadow from the element
blur: the amount of blur applied to the shadow
spread: the amount of spread applied to the shadow
color: the color of the shadow

Approach 1: Using a wrapper div: One approach is to wrap the <span> and <input> elements inside an <div> element and apply the box-shadow property to the <div> element.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .input-wrapper {
            display: inline-block;
            box-shadow: 2px 2px 5px #888888;
            padding: 5px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <div class="input-wrapper">
        <span>Username:</span>
        <input type="text">
    </div>
</body>
</html>

Output:

Approach 2: Using the: before pseudo-element: Another approach is to use the: before pseudo-element to create a shadow effect.

Example: In this example we are using above approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .input-wrapper {
            position: relative;
            display: inline-block;
        }
 
        .input-wrapper:before {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
            box-shadow: 2px 2px 5px #888888;
            z-index: -1;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    <span class="input-wrapper">
        Username:
        <input type="text">
    </span>
</body>
</html>

Output:

Approach 3: Using the outline property: Finally, you can use the outline property to create a shadow effect.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .input-wrapper {
            display: inline-block;
            outline: 2px solid #888888;
            outline-offset: -5px;
        }
    </style>
</head>
 
<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    Username:
    <span class="input-wrapper">
        <input type="text">
    </span>
</body>
</html>