How to create a beautiful multicolored input

A step-by-step guide on how to create a beautiful multicolored input.

HTML

For HTML the only thing we need is an input and a label.

<div>
    <input type="input" class="colored_input" name="name" id="name" />
    <label for="name" class="colored_label">Name</label>
</div>

CSS

For CSS, first we'll style our input element.

We'll set font family to inherit, background to transparent and with to 400 pixels.

We'll remove the border and outline by setting it to 0, and add border bottom of 3 pixels solid grey.

Lastly, we'll set font size to 20 px, color to white and bottom padding to 5 pixels.

.colored_input {
    font-family: inherit;
    background: transparent;
    width: 400px;
    outline: 0;
    border: 0;
    border-bottom: 3px solid #9b9b9b;
    font-size: 20px;
    color: #fff;
    padding-bottom: 5px;
}

Now we'll style the label.

We'll set position to absolute and display to block.

By setting transform to translate Y to -60 pixels, we'll position this element on top of the input.

And we'll set it's color to the same grey we used before on input.

.colored_label {
    position: absolute;
    display: block;
    transform: translateY(-60px);
    color: #9b9b9b;
}

Now we'll style the input when it's in focus.

Here we'll just change border color and set it to linear gradient image from light blue to light pink.

.colored_input:focus {
    border-image: linear-gradient(to right, #42aec5, #ee82e8);
    border-image-slice: 1;
}

Lastly, we'll change label's color when the input is in focus.

We'll set it to the same light blue color we used for linear gradient on input's border.

.colored_input:focus + .colored_label {
    color: #42aec5;
}

And that's it. Simple but beautiful, isn't it?

Thanks for reading! ❤️

You can watch a video tutorial here.