Input Field Gradient Border Focus Fun

index.html

<p>
	<span class="input"><input type="text" placeholder="Gradient border focus fun"></span>
</p>

input-field-gradient-border-focus-fun.markdown

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.

style.scss

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