Creating Glowing Border Effect Around Input Fields using CSS

Last Updated : 05 Jun, 2023

In this article, we see how to create a glowing border around an input field using CSS properties. To accomplish this task, we will be using some CSS properties like border-color, box-shadow, and :focus pseudo-class to the <input> element.

Approach: The following approach will be used to create the Glowing Border around an input field:

The :focus is used when an element is focused, and a pseudo-class is utilized to provide a special effect to it.
The box-shadow CSS feature creates shadow effects around the frame of an element. Several effects can be set, separated by commas. A box shadow is defined by the element’s X and Y offsets, blur and spread radius, and color.
The border-color property allows you to modify the color of the border that surrounds an element. Using the properties, you can change the color of the bottom, left, top, and right sides of an element’s border.

Syntax:

selector:focus {
   border-color: value; 
   box-shadow: [horizontal offset] [vertical offset] 
                  [blur radius][optional spread radius] 
                  [color]; 
}

Example 1: In this example, we create a form that a have three inputs i.e. names, emails, and messages. After that, we use the :focus pseudo-class whenever we focus on an element around the element, we can see the border which will be the color of “#00b894” at the bottom, and we use some box-shadow.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge"> 
    <meta name="viewport" 
          content= "width=device-width,  
                    initial-scale=1.0"> 
    <style> 
        form { 
            max-width: 500px; 
            margin: 0 auto; 
        } 
  
        label { 
            display: block; 
            font-weight: bold; 
            margin-bottom: 5px; 
        } 
  
        input[type="text"], 
        input[type="email"], 
        textarea { 
            border: 2px solid #ccc; 
            padding: 10px; 
            font-size: 16px; 
            border-radius: 5px; 
            width: 100%; 
            margin-bottom: 20px; 
        } 
  
        input[type="text"]:focus, 
        input[type="email"]:focus, 
        textarea:focus { 
            border-color: #00b894; 
            box-shadow: 0 0 10px #00b894; 
            outline: none; 
        } 
        button[type="submit"] { 
            background-color: green; 
            color: #fff; 
            border: none; 
            padding: 10px 20px; 
            font-size: 16px; 
            border-radius: 5px; 
            cursor: pointer; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
              GeeksforGeeks 
          </h1> 
        <h3> 
              Glowing Border Around an Input Field 
          </h3> 
    </center> 
    <form> 
        <label for="name">Name:</label> 
        <input type="text" 
               id="name" 
               name="name" 
               placeholder="Enter your name"> 
  
        <label for="email">Email:</label> 
        <input type="email" 
               id="email" 
               name="email" 
               placeholder="Enter your email"> 
  
        <label for="message">Message:</label> 
        <textarea id="message" 
                  name="message" 
                  placeholder="Enter your message"> 
        </textarea> 
  
        <button type="submit">Submit</button> 
    </form> 
</body> 
</html>

Output:

Example 2: In the following example, we add the :focus pseudo-class to the <input> element before specifying the border-color and box-shadow properties. We also set the outline property to “none”

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          Glowing Border Around an Input 
        Field Using CSS  
      </title> 
    <style> 
        body { 
            margin: 10rem; 
        } 
  
        label { 
            display: block; 
            margin: 20px; 
            overflow: auto; 
            font-family: sans-serif; 
            font-size: 18px; 
            color: rgba(68, 68, 68); 
            text-shadow: 0 0 3px black; 
            padding: 21px 13px 12px 0; 
        } 
  
        input { 
            width: 220px; 
            border: 3px solid rgba(174, 174, 181, 1); 
            border-radius: 8px; 
            font-size: 17px; 
            padding: 8px; 
            margin-top: -13px; 
        } 
  
        input:focus { 
            outline: none; 
            border-color: rgba(38, 191, 71, 1); 
            box-shadow: 0 0 10px rgba(38, 191, 71, 1); 
        } 
  
        button { 
            padding: 10px 10px 10px 10px; 
            margin-bottom: 1rem; 
            background: green; 
            color: white; 
            border: none; 
            border-radius: 6px; 
            cursor: pointer; 
            transition: all linear 0.5s; 
            margin-top: 1rem; 
        } 
  
        button:hover { 
            transform: translate(0px, -6px); 
        } 
    </style> 
</head> 
  
<body>    
    <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
    <h3> 
          Glowing Border Around an Input Field 
      </h3> 
      
    <form> 
        <div class="form-group"> 
            <label for="first-name"> 
                  Your First Name: 
              </label> 
            <input type="text" 
                   id="first-name" 
                   name="first-name"> 
        </div> 
  
        <div class="form-group"> 
            <label for="last-name"> 
                  Your Last Name: 
              </label> 
            <input type="text" 
                   id="last-name"
                   name="last-name"> 
        </div> 
        <button type="submit">Submit</button> 
    </form> 
</body> 
</html>