<div class="container">
<div class="gradient-border gradient-red-purple">
<input type="text" value="Hello Codepen =)" />
</div>
<div class="gradient-border gradient-purple-blue">
<input type="text" value="First name" />
</div>
<div class="gradient-border gradient-blue-green">
<input type="text" value="Last name" />
</div>
</div>
:root {
/* Adjust theme variables here */
--background: #1f2227;
--input-width: 300px;
--input-height: 55px;
--border-width: 3px;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
font-size: 16px;
}
body {
background-color: var(--background);
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 500px;
input {
position: relative;
width: var(--input-width);
height: var(--input-height);
background-color: var(--background);
color: #fff;
padding: 1rem;
font-size: 1.5rem;
border: none;
&:focus,
&:active {
outline: none;
}
}
}
/* Ignore above it's just setup for the demo */
.gradient-border {
position: relative;
display: inline-block;
padding: calc(var(--border-width) * 3);
margin-bottom: 1.5rem;
/* This is for the gap between the borders */
&:before {
content: "";
position: absolute;
top: var(--border-width);
left: var(--border-width);
width: calc(var(--input-width) + (var(--border-width) * 4));
height: calc(var(--input-height) + (var(--border-width) * 4));
border: var(--border-width) solid var(--background);
}
&.gradient-red-purple {
background: linear-gradient(to right, red, purple);
}
&.gradient-purple-blue {
background: linear-gradient(to right, #d53a9d, #743ad5);
}
&.gradient-blue-green {
background: linear-gradient(to right, cornflowerblue, limegreen);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.