I really like using vivid colors when I design and/or build a website, especially if the default theme is dark. I think it gives a nice contrast to the component, and it improves overall user experience. Bear in mind though, we should be using colors "efficiently". Once you cross the line of abundance, it can be the doomsday for the project!

Having too many colors is beautiful only in the nature ;)

If there's anything better than vivid and bright colors, it would be color gradients. Color gradients are defined as a gradual blending between two or more colors. This blending can be shown as either linear or radial.

In this post we'll learn how to create beautiful gradient lines. Since the idea is rather general, you can use this easy yet effective approach as border of a component, underline for a text and many more. Damn, you can even have nice transitions when the component is hovered. It is really up to your imagination :)

Before checking the code snippet, let's first grasp which CSS features we are going to use. It's definitely not a hard pill to swallow, but understanding the fundamentals is the easiest way to customize it for your future needs.

Now, there are 2 CSS properties that we need to be aware of. The first CSS property that we'll utilize is position. The position property specifies the type of positioning method used for an element.

Possible values: static, relative, absolute, fixed, or sticky

Default value: static

The other property (not really a property) that we will have to use is pseudo-elements, "after" in particular. This selector enables us to select and insert a fragment after the selected content.

What I have been explaining might sound a verbose or even abstract. So enough with chitchat and background information, let's get our hands dirty!

For the sake of example, let's say we want to build a footer for our website and we would like to have a nice gradient border.

Now, we need to insert our gradient border-top with after: selector, and the snippet needs to be positioned as absolute.

Note that we need to assign relative position to the component for absolute position to have an effect.

After positioning our JSX tag & designating the dimensions of our border accordingly, the code looks something like this:

Our pseudo border has landed to the desired place, now we need to add background color to it. TailwindCSS makes it a breeze to generate gradient colors. We need to:

1. Specify the gradient direction (left -> right | top -> bottom and so on)
2. Choose starting color
3. Choose ending color

I'm not going into details here, buy you can refer to tailwind docs for detailed information :)

Here is the result of the code snippet, and a screenshot of how it would appear:

With that being handled, we now conclude this post. I hope this approach will help you in your projects, and more importantly, I hope it will motivate you to push your creative limits!

Thanks a lot for your time :)