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:

enter image description here

.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.

enter image description here

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.

enter image description here

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/


    CSS Howto..

    How should I convert this PSD to HTML & CSS Menu

    HTML+CSS: How to add arrow to horizontal menu items?

    how to affect an element's width by one child element but not others using CSS

    Css How to override

    [closed]

    JS/CSS. How do I force a child div to the bottom of it's parent div

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to put text over img on hover - width and height are variable

    How to reduce my code in both jQuery and CSS

    HTML code to show splitted data_frame in one html page using python

    How does -ms-view-state differ from standard CSS Media Queries Expressions?

    How to style a built-in comment box imported from a third party?

    How to add a border-bottom-image with css

    How to move the blue twitter bird slowly using css and js?

    how to indent html output using CSS

    Bootstrap: navbar showing a line

    How to rearrange these elements with CSS?

    How to use float and margin together?

    How to make child element do not fill his parent when hover is performed in CSS?

    How can I remove hover style in CSS

    How to auto adjust wrapper height when padding is applied to inner elements

    How to style a particular paragraph element in css without effecting the other paragraphs in the same class?

    How to center links in header using CSS?

    How to apply direction css attribute in list elements

    when a div is showing do some thing for me and when its hidden stop that , with jquery its possible?

    How do I apply CSS Transition to my responsive menu?

    How to include css file in a JavaFx Spring application

    How do I get the background image to not repeat and take up the entire section?

    How to center list of links in a straight line. CSS

    resize/expanding slideshow (inside a div) overtakes content that follows below

    How do I switch external CSS files?