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;
    z-index: 1;

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

.rainbow {
    border:1px solid rgba(255,255,255,0.5);
    padding: 5px;
    border-radius: 4px;    
    display: block;
    z-index: 500;

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


    CSS Howto..

    Every third post excerpt shows up on its own line

    How is this put in the center using CSS?

    How do I show specific images from a get_children array in WordPress

    How to apply alternate background color for each column in CSS columns

    How can I allow resizable() to increase size beyond initial size?

    How do I stop the text from overlapping?

    How to fix width of tooltip at IE8

    How to support transitionend without browser sniffing?

    how to position divs within another div

    How to locate a list of webelement using Css selector in C#

    How to silently hide “Image not found” icon when src source image is not found

    How to make your website works on a projector?

    How to make text float on top of an image html css

    How to place divs three in a row with css and html

    Given an image button with borders how to stretch/repeat middle part in CSS for variable length content?

    How to make other line indent using css?

    How to select lowest level ul in nested ul in Javascript/ css

    How to include Glyphicons without using Bootstrap CSS

    Show Button in Table Cell Hover Over/Mouse Over

    How do you create a transparent overlay with text upon mouse hover?

    jquery easyui TreeGrid: How to make only Column Headers Bold

    How can i stop a child div moving towards left when browser size becomes less than webPage size?

    How to make list inside div expand after content in list

    How to override CSS style for a specific element if its parent has a specific class

    How to make line-through wider/bigger than text/element using CSS

    How to style placeholder text color for individual text field?

    How to format XML file with CSS?

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    Selecting an adjacent's child… how?

    How to set CSS class to Button control using Session value in design page