FORMS

Animated Border Input

A modern input field with a smooth animated gradient border that becomes active when the user focuses on the field.

HTML
<div class="animated-border-wrap">

  <input
    type="text"
    placeholder="Enter your name"
    aria-label="Enter your name"
  >

</div>
CSS
.animated-border-wrap{
  position:relative;
  width:100%;
  max-width:420px;
  padding:2px;

  border-radius:12px;

  background:
    linear-gradient(
      120deg,
      #22d3ee,
      #8b5cf6,
      #d946ef,
      #22d3ee
    );

  background-size:300% 300%;

  transition:.25s ease;
}

.animated-border-wrap input{
  width:100%;
  padding:15px 16px;

  border:0;
  border-radius:10px;
  outline:none;

  background:#0b1423;
  color:#ffffff;

  font-size:16px;
}

.animated-border-wrap input::placeholder{
  color:#65748b;
}

.animated-border-wrap:focus-within{
  animation:borderFlow 3s linear infinite;

  box-shadow:
    0 0 22px rgba(34,211,238,.18);
}

@keyframes borderFlow{

  0%{
    background-position:0% 50%;
  }

  50%{
    background-position:100% 50%;
  }

  100%{
    background-position:0% 50%;
  }

}

How This Animated Border Input Works

This Animated Border Input creates a moving cyan, purple, and magenta border around a standard text field when the input receives focus. The effect is implemented entirely with HTML and CSS. There is no JavaScript in the published component.

The HTML is deliberately small. A .animated-border-wrap container surrounds a single <input type="text">. The field has the placeholder “Enter your name” and a matching aria-label. The wrapper is responsible for creating the colorful border, while the input provides the dark inner surface.

The .animated-border-wrap uses position: relative, width: 100%, and max-width: 420px. This allows the control to shrink with its container while preventing it from becoming wider than 420px. A 12px border radius rounds the outside of the component.

Instead of applying a conventional CSS border, the wrapper has padding: 2px. Its background is a linear-gradient() containing cyan #22d3ee, purple #8b5cf6, magenta #d946ef, and cyan again. Because the dark input sits inside this wrapper, the two pixels of exposed gradient around it appear as a colorful border.

The gradient uses an angle of 120 degrees and background-size: 300% 300%. Making the gradient background much larger than the wrapper provides room for its position to move. The gradient itself is always present, but it remains static until the input is focused.

The inner input takes up the full available width and uses 15px vertical and 16px horizontal padding. Its border is removed with border: 0, while border-radius: 10px keeps its corners slightly inside the wrapper’s 12px radius. The input uses the component’s dark #0b1423 background with white text and a 16px font size. Its placeholder is displayed in the muted #65748b color.

The main interaction depends on the :focus-within pseudo-class. When the input receives focus, the parent .animated-border-wrap also matches :focus-within. This allows CSS to animate the outer wrapper based on the state of its child input. For more information about this behavior, see the MDN :focus-within documentation.

While focused, the wrapper starts the borderFlow animation. It runs for three seconds with linear timing and repeats infinitely. The same focused state also adds 0 0 22px rgba(34,211,238,.18) as a subtle cyan shadow around the component.

The @keyframes borderFlow rule animates background-position. At 0%, the position is 0% 50%. Halfway through the animation, it reaches 100% 50%, and at 100% it returns to 0% 50%. Combined with the oversized 300% gradient background, this movement makes different portions of the gradient travel across the visible two-pixel border.

When focus leaves the input, the wrapper no longer matches :focus-within, so the infinite animation and focus shadow stop. The component therefore reserves its moving effect specifically for the active input state.

Customizing the Animated Border Input

The border effect can be adapted by changing the existing gradient, dimensions, animation, and field styles.

  • Change max-width: 420px to control the maximum width of the input.
  • Adjust the wrapper’s padding: 2px to make the visible gradient border thinner or thicker.
  • Replace #22d3ee, #8b5cf6, and #d946ef with a different gradient color combination.
  • Change the 120deg gradient angle to alter the direction of the color distribution.
  • Adjust background-size: 300% 300% to change the area used by the moving gradient.
  • Modify the three-second borderFlow duration to make the border animation faster or slower.
  • Change the wrapper’s 12px and input’s 10px border radii to adjust the corner shape.
  • Edit the input’s #0b1423 background, 16px font size, padding, placeholder, or aria-label to fit another form design.

Where to Use This Animated Border Input

The focused border makes this component suitable for forms where the active text field should receive clear visual emphasis.

  • Name fields in sign-up forms
  • Login and account forms
  • Search interfaces
  • Profile editing screens
  • Contact form fields
  • Landing-page forms
  • Dashboard settings

For a complete authentication layout that uses multiple fields and switches between login and registration views, the Animated S-Wave Login & Sign Up Form is a related CodeRipple component. This input itself remains a standard text field, so validation, submission, and application-specific behavior would need to be provided separately.

Frequently Asked Questions

Does this Animated Border Input use JavaScript?

No. The retrieved component contains no JavaScript. The moving border is produced entirely with CSS using :focus-within, a gradient background, and a keyframe animation.

Why does the border start moving only when the input is focused?

The animation: borderFlow 3s linear infinite declaration exists inside .animated-border-wrap:focus-within. The wrapper only matches that selector while its child input has focus.

How is the gradient border created without a normal border?

The wrapper has a colorful gradient background and two pixels of padding. The dark input sits inside it, leaving the wrapper’s gradient visible around the edges like a border.

How does the border animation move?

The borderFlow keyframes animate background-position from 0% 50% to 100% 50% and back. Because the gradient uses background-size: 300% 300%, shifting its position changes which colors are visible around the input.

This Animated Border Input uses a simple wrapper-and-input structure to create a focused gradient effect without extra elements or JavaScript, while the native text field remains responsible for accepting user input.

Scroll to Top