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/