Creating a Shooting Star Border Animation with Tailwind CSS

In this blog post, we'll create a captivating "shooting star" border animation using Tailwind CSS. This effect gives a glowing, animated border to an input field that can catch the user's attention—perfect for call-to-action sections like email sign-ups or important notifications.

Demo

Before diving into the code, you can check out the live demo of the effect here: View in Tailwind Playground.

The Concept

The animation is achieved using Tailwind CSS's utility classes and pseudo-elements. We'll use Tailwind's after pseudo-class to create a conic gradient animation that spins around the input field, giving the illusion of a shooting star tracing the border.

HTML and Tailwind CSS Setup

Below is the HTML structure and Tailwind CSS classes needed to create this effect:

<div class="flex h-screen bg-black">
  <div class="z-10 m-auto overflow-hidden p-0.5">
    <div class="after:transparent relative h-14 w-[500px] rounded-md border border-white/50 bg-black after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">
      <input type="text" placeholder="Join the waitlist, enter your email.." class="h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none">
    </div>
  </div>
</div>

Breaking Down the Code

Container Setup

  <div class="flex h-screen bg-black">




<ul>
<li>We start by creating a flex container that centers the content both vertically and horizontally with h-screen (full height) and bg-black (black background).</li>
</ul>

<h4>
  
  
  Wrapper for Input Field
</h4>



<pre class="brush:php;toolbar:false">  <div class="z-10 m-auto overflow-hidden p-0.5">




<ul>
<li>The input field is wrapped inside a div that has z-10 to ensure it is above the animated border, m-auto to center it within the flex container, and overflow-hidden to contain the animated border within its bounds.</li>
</ul>

<h4>
  
  
  Input Field with Animated Border
</h4>



<pre class="brush:php;toolbar:false">  <div class="after:transparent relative h-14 w-[500px] rounded-md border border-white/50 bg-black ...">




<ul>
<li>The main input field is set to a fixed width of 500px and height of 14 Tailwind units.</li>
<li>The border-white/50 class adds a semi-transparent border, while rounded-md gives it rounded corners.</li>
<li>
bg-black sets the background color to black, blending it with the container.</li>
</ul>

<h4>
  
  
  Creating the Animation
</h4>



<pre class="brush:php;toolbar:false">  after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">

• The after pseudo-element is used to create the conic gradient that will animate around the border.
• after:-inset-[1px] slightly expands the gradient beyond the input's border, and after:absolute positions it absolutely to cover the entire input area.
• after:animate-[spin_4s_infinite] adds a custom spin animation that completes one full rotation every 4 seconds.
• The after:bg-[conic-gradient...] creates the gradient effect. We use the from-transparent and to-blue-600 classes to define the color stops, giving a fading effect that mimics a shooting star.

Input Field Styling

  <input type="text" placeholder="Join the waitlist, enter your email.." class="h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none">

• The input itself is transparent (bg-transparent) and takes up the full height and width of its parent.
• The text-lg class sizes the text, while text-white and placeholder:text-white/40 ensure that the text and placeholder are visible against the dark background.
• Finally, focus:outline-none removes the default focus outline to maintain the custom styling.

Conclusion

With just a few lines of Tailwind CSS and the power of pseudo-elements, you can create eye-catching effects like this shooting star border animation. This effect is not only aesthetically pleasing but also easy to implement and customize for your own projects. Feel free to tweak the colors, timing, and other properties to fit your design needs!

Happy coding!

Cover Photo by Juskteez Vu on Unsplash