How to make a colorful gradient glow around your input-box?

Tags: html,css

Problem :

I know that for blue glow around the box, we just need to applied the code below to our CSS:

.glowing-border {
    border: 2px solid #dadada;
    border-radius: 7px;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

---

Now I want to take my input-box to a next level.

I want it to look like this - rather than blue glow. I want to have a nice rainbow gradient effect on it.

Is there any CSS Expert out there and think that this is doable for me ?

---

Don't have to be CSS, if someone have any suggestion on how to get this done in a different way - please leave a comment or answer.

---

Solution :

I think you can do that by using two additional divs. One to be the wrap (also having the background gradient) with an white inset box shadow for the feather effect, and one div behind the input area with a white background and outer box shadow.

I assumed that you form background color is white.

.rainbowWrap {
    width: 200px;
    background: //your gradient...
    padding: 4px;
    box-shadow: inset 0px 0px 5px 3px white;
    border-radius: 2px;
    position:relative;
    z-index: 1;
}

.rainbowBg {
    width: 184px;
    height:15px;
    background: white;
    position:absolute;
    top: 10px;
    left: 10px;
    box-shadow: 0px 0px 7px 2px white, 0px 0px 13px 2px white;
    border-radius: 4px;
    z-index: 2;
}

.rainbow {
    width:186px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.5);
    padding: 5px;
    border-radius: 4px;    
    outline:none;
    display: block;
    position:relative;
    z-index: 500;
    color:#666;
}

Note that I have only wrote code and only tested in Google Chrome.

Fiddle: http://jsfiddle.net/b03acbdu/5/