How to Build a Gradient‑Border Input with CSS – Full Step‑by‑Step Guide

Requirement Overview

During a requirement review the product team asked for a more visually appealing input box. Using Element Plus the default style is plain, so the author decided to create an input with a gradient border that becomes even more striking on hover.

Implementation Idea

The gradient border is achieved by stacking two backgrounds: a solid‑color (or white) background for the content area (using padding-box ) and a colorful linear gradient for the border area (using border-box ). The CSS property background-clip controls which box the background is painted on.

background-clip determines whether the background is drawn within the content box, padding box, or border box.

<code>background-clip: border-box | padding-box | content-box | text;</code>

Code Implementation

Gradient Background

<code>&lt;template&gt;
  &lt;div class="input-container"&gt;
    &lt;input type="text" placeholder="Enter text" class="gradient-input" /&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script setup&gt;
&lt;/script&gt;

&lt;style&gt;
/* Container */
.input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: #f4f4f9;
}

/* Gradient input */
.gradient-input {
  width: 400px;
  height: 40px;
  padding: 5px 12px;
  font-size: 16px;
  color: #333;
  outline: none;
  border: 1px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, #ff7eb3, #65d9ff, #c7f464, #ff7eb3) border-box;
  border-radius: 20px;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.gradient-input::placeholder {
  color: #aaa;
  font-style: italic;
}
</code>

Hover Effect

Adding a :hover rule changes the gradient direction and adds a glowing box‑shadow :

<code>.gradient-input:hover {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #ff0076, #1eaeff, #28ffbf, #ff0076) border-box;
  box-shadow: 0 0 5px rgba(255,0,118,0.5), 0 0 20px rgba(30,174,255,0.5);
}
</code>

Focus Effect

When the input receives focus, the gradient intensifies and the shadow becomes larger:

<code>.gradient-input:focus {
  background: linear-gradient(white, white) padding-box,
              linear-gradient(45deg, #ff0076, #1eaeff, #28ffbf, #ff0076) border-box;
  box-shadow: 0 0 15px rgba(255,0,118,0.7), 0 0 25px rgba(30,174,255,0.7);
  color: #000;
}
</code>

Full Code

<code>&lt;template&gt;
  &lt;div class="input-container"&gt;
    &lt;input type="text" placeholder="Enter text" class="gradient-input" /&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;style&gt;
.input-container { /* same as above */ }
.gradient-input { /* same as above, including hover and focus rules */ }
.gradient-input::placeholder { color: #aaa; font-style: italic; }
&lt;/style&gt;
</code>

Conclusion

By using background-clip with layered gradients, we created an input field whose border displays a vibrant gradient that deepens on hover and focus, while keeping the inner content clean and readable.

Everyone can adjust the gradient direction, colors, or animation to make their input fields stand out!