DEV Community

Méschac Irung for Tailus

Posted on • Edited on

75 1 1

How to create gradient borders with tailwindcss

tailus gradient borders cover

Gradient borders are a great way to add visual interest and depth to a website. They can be used to highlight important elements, create a sense of movement, or simply make a website look more stylish.

Here are few steps to to create gradient borders with tailwindcss.

1. Create a container

Create a div element, add rounded-3xl and p-px utilities to it. Note that you can use an other border radius utility and padding, visually, the padding will be seen as the size of the border.

<div class="rounded-3xl p-px"></div>
Enter fullscreen mode Exit fullscreen mode

2. Add a gradient background to the container

<div class="rounded-3xl p-px bg-gradient-to-b from-gray-200 to-transparent"></div>
Enter fullscreen mode Exit fullscreen mode

If your card is over a blury background, you should play with opacity to get a better look.

Example : from-gray-950/40

3. Create an other container inside the parent container

<div class="rounded-3xl p-px bg-gradient-to-b from-gray-200 to-transparent">
    <div class="bg-gray-50 p-10">

    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

4. Add a custom border radius to the child container

As the parent container has a border radius, you have to add some to the child container to get a perfect rounded border.

Use this formula to get the border radius of the child container :

Child container border radius = (parent container border radius) - (parent container padding).

For example, if the parent container border radius is 10px and the parent container padding is 2px, then the child container border radius would be 10px - 2px = 8px.

To calculate, use the css calc function to get the exact border radius of the child container.

You can calculate in your head, but using the 'calc' function allows you to obtain the result even when you don't know the padding or border radius of the parent container, as may be the case when using css variables.

*The css rule should look like this : *

.child-container {
  border-radius: calc(3.5rem - 1px);
}
Enter fullscreen mode Exit fullscreen mode

Arbitrary value

Use an arbitrary value to apply the formula to the tailwind css rounded utility.

<div class="rounded-3xl p-px bg-gradient-to-b from-gray-200 to-transparent">
    <div class="bg-gray-50 p-10 `rounded-[calc(1.5rem-1px)]`">

    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

5. Add content to your card

<div class="rounded-3xl p-px bg-gradient-to-b from-gray-200 to-transparent">
    <div class="bg-gray-50 p-10 rounded-[calc(1.5rem-1px)]">
      <p class="text-gray-700 dark:text-gray-300">I absolutely 
love Tailus! The component blocks are beautifully designed and easy to use, which makes creating a great-looking website a breeze.
      </p>

      <div class="mt-8 flex gap-4 items-center">
        <img class="h-12 w-12 rounded-full" src="https://pbs.twimg.com/profile_images/1599029039297077249/p0znhFdE_400x400.jpg" alt="" />
        <div>
          <h3 class="text-lg font-medium text-gray-700 dark:text-white">Oketa Fred</h3>
          <span class="text-sm tracking-wide text-gray-600 dark:text-gray-400">Fullstack Developer</span>
        </div>
      </div>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Congratulations, you've created gradient borders using tailwind css!

You can use this technique to craft a variety of gradient borders with different colors, gradient styles, and border radii. This approach adds visual interest and depth to your website while maintaining a clean, modern aesthetic.

More Tips

Want to take your TailwindCSS skills to the next level? Tailtips is packed with actionable tips and tricks to help you build better, faster, and smarter with TailwindCSS. From creative solutions like gradient borders to advanced techniques and best practices, Tailtips has everything you need to master TailwindCSS.

Discover Tailtips

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay