Animated Background Stripes Effect 12 exercises

Generate a Stripe Pattern with a CSS Linear Gradient

Let's start by writing some CSS in a custom class called stripes.

@layer components {
.stripes {
/* Do your thing! */

Your challenge is to create a CSS linear gradient with diagonal and repeating black stripes inside the element with the stripes class.

Here's an example o

Loading exercise


0:00 We're going to start by writing some CSS. You can see we have this stripes class here. As it's mentioned, it's not a Tailwind class, but a custom one.

0:08 You can see here I've prepared this stripes selector. You're going to do your CSS right there.

0:13 Your first challenge will be to write a CSS linear gradient that implements diagonal and repeating black stripes inside this element here that has a class of stripes.

0:23 Here's an example of what it should look like in Figma. You don't have to be pixel perfect. The size and spacing between the stripes doesn't really matter. This is just for reference.

0:32 You want something looking a little bit like this inside that element.

0:37 Good luck.