Get Stripey with No-Jank CSS Stripes

Creating No-Jank CSS Stripes

Stripes are one of the simplest and most effective graphical elements you can use to create a modern, eye-catching website. But when it comes to coding stripes using traditional CSS methods, the results can be far from perfect.

CSS stripes are often plagued by jank, or glitches in smoothness and motion, because they rely on a repeating background image that moves as the user scrolls. This can create an uneven animation and a choppy finish.

Fortunately, there are ways to create no-jank CSS stripes. By combining simple CSS properties like linear gradients and animation, you can create stripes without any disruptive jank. Here’s how:

Step One - Define a Linear Gradient

The trick to creating a no-jank CSS stripe is to define a linear gradient as your background. The linear gradient will serve as the base for the animation, allowing the whole stripe to move together instead of relying on a single background image. To define a linear gradient, use the following syntax:

  background: linear-gradient(direction, color-stop1, color-stop2);

Where direction is the angle of the gradient and color-stop1 and color-stop2 are the two colors and their positions in the gradient. For example, the following code defines a linear gradient from black to white running from left to right:

  background: linear-gradient(to right, #000, #FFF);

Step Two - Add Animation

Once you’ve defined the linear gradient, the next step is to add the animation. To do this, use the animation property with a keyframes value, like so:

  animation: my-animation 10s linear infinite;

Where my-animation is the name of the animation, 10s is the duration of the animation (in seconds) and linear is the type of animation. Finally, infinite is used to ensure the animation runs continuously.

Step Three - Create the Keyframes

The last step is to create the keyframe animation. This is done by defining the start and end points of the animation in the keyframes. For example, the following code can be used to create a continuous scrolling effect across the stripe:

  @keyframes my-animation {
    0% { background-position: 0%; }
    100% { background-position: 100%; }
  }

That’s it! With these three simple steps, you’ve created a no-jank CSS stripe that will look great on any website.