How to build a trailing gradient button

Ok, so I have been getting really inspired recently by the raycast landing page. The whole site is really beautiful but there is one thing that I really wanted to learn how to make: this cool button effect.

It took me a lot longer than I want to admit to get this to finally work and the process was super fascinating. Let's dive in!

This button has a lot of different moving parts but let’s look at the most basic element: the conic gradient. What's a conic gradient?

The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels.

Let’s look at a basic conic gradient.

Pretty! Now let's manipulate this conic to match the trailing effect of the button.

What we have here is a conic that has been rotated -80deg, positioned at 30px 15px, and layered over a solid base color. The gradient is defined to start transparent, flash to #eca5a7, and return to transparent again.

::raycast-conic-start::

Now we can get into the fun stuff: the animation.

There are two options for animating this: JavaScript or CSS. I used CSS via the @property rule from the Houdini API. It’s not supported on every browser, so double check if you’re deploying this in production.

First let’s animate the position of the conic:

::raycast-conic-moving-position::

The gradient animates from one side to the other, pauses, and moves back. Next up: rotation!

::raycast-conic-moving-and-rotating::

Now we’ve got a smooth loop: the gradient moves, then rotates, then moves back, then rotates again. Nearly there.

Let’s add the button UI layer and a bit of glow on hover.

::raycast-button::

And that’s it! You’ve got a trailing conic gradient animation fully done in CSS, wrapped in a clickable glowing button. No JS needed 💅