Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Last active Nov 8, 2018

Embed
What would you like to do?
Input Field Gradient Border Focus Fun
<p>
<span class="input"><input type="text" placeholder="Gradient border focus fun"></span>
</p>

Input Field Gradient Border Focus Fun

A gradient border on an input field that feathers out when focussed

A Pen by Rik Schennink on CodePen.

License.

.input {
// bigger font size for demo purposes
font-size: 1.5em;
// the border gradient
background: linear-gradient(21deg, #10abff, #1beabd);
// the width of the input border
padding: 3px;
// we want inline fields by default
display: inline-block;
// we want rounded corners no matter the size of the field
border-radius: 9999em;
> * {
display: inherit;
border-radius: inherit;
margin: 0;
border: none;
outline: none;
padding: 0 .325em;
transition: all .25s;
// fancy shadow styles when focussed
&:focus {
box-shadow: inset 0 0 0 2px #fff,
0 0 0 3px #fff,
3px -3px 25px #1beabd,
-3px 3px 25px #10abff;
}
}
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height:1.5;
font-size:1em;
}
body {
text-align: center;
display:flex;
align-items: center;
justify-content: center;
}
html, body {
height:100%;
}
input {
font-family: inherit;
line-height:inherit;
color:#2e3750;
min-width:12em;
}
::placeholder {
color:#cbd0d5;
}
html::after {
content:'';
background: linear-gradient(21deg, #10abff, #1beabd);
height:3px;
width:100%;
position:absolute;
left:0;
top:0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.