LEARN

Tailwind CSS Gradient

Tailwind CSS gradients allow you to easily apply gradient backgrounds to elements within your web application or website. Gradients can add depth, dimension, and visual interest to your designs, enhancing their visual appearance. This tutorial will explore how you can add gradient to text, button, card and other html elements.

Text Gradient

To get gradient text you need to use few classes:

  • .text-transparent : This makes the actual text transparent and shows the background (which has the gradient)
  • .bg-clip-text : This makes the background only show on the text outlines
  • .bg-gradient-to-{flow} : This is used to state what direction the gradients flow
  • .from-{color} : Set the beginning color in our case to primary
  • .to-{color} This sets the end color, in our case danger

Pagedone Design System 

 <div class="bg-white w-full h-auto py-5">
      <h2 class="text-6xl font-manrope font-black leading-snug text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-pink-600 to-purple-600"> Pagedone Design System </h2>
      </div>

Tailwind CSS Gradient Border

To get gradient border you need to add gradient utility classes from tailwind css.

Pagedone Design System

<div class="w-96 h-48 rounded-md bg-gradient-to-tr from-indigo-600 via-pink-600 to-purple-600 p-0.5">
      <div class="w-full h-full rounded-md bg-white  flex items-center justify-center">
      <p class="text-2xl font-manrope font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-pink-600 to-purple-600">Pagedone Design System</p>
      </div>
      </div>

Gradient background

To get gradient background to your card you need to add gradient utility classes from tailwind css.

Pagedone Design System

<div class="w-96 h-48 rounded-md bg-gradient-to-tr from-indigo-600  to-purple-500 p-0.5">
      <div class="w-full h-full rounded-md  flex items-center justify-center">
      <p class="text-2xl font-manrope font-bold text-white">Pagedone Design System</p>
      </div>
      </div>

Cards with background image and gradient overlay

Add gradient overlay in tailwind css use gradient utility classes. Gradient overlay can be used to show text more clearly over image.

Wintage cars

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque recusandae corporis dolorum repellendus enim psa sed esse nulla officiis.

Toy

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque recusandae corporis dolorum repellendus. 

  <div class="relative max-w-xs border border-solid border-gray-200 rounded-2xl p-4 transition-all duration-500 col-span-12  xl:p-7   lg:col-span-3 md:col-span-6 ">
      <div class=" mb-6 ">
      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M8.66699 12.8162L11.3501 15.4993C11.5616 15.7107 11.9043 15.7109 12.1158 15.4997L17.8753 9.75033M13.0003 23.8337C7.01724 23.8337 2.16699 18.9834 2.16699 13.0003C2.16699 7.01724 7.01724 2.16699 13.0003 2.16699C18.9834 2.16699 23.8337 7.01724 23.8337 13.0003C23.8337 18.9834 18.9834 23.8337 13.0003 23.8337Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      </svg>
      </div>
      <h4 class="text-base font-semibold text-gray-900 mb-2 capitalize transition-all duration-500 ">Fast Transaction</h4>
      <p class="text-sm font-normal text-gray-500 transition-all duration-500 leading-5 mb-5"> Provides faster transaction, so money arrives in realtime </p>
      <button class="bg-indigo-600 shadow-sm rounded-full py-2 px-5 text-xs text-white font-semibold">Read More</button>
      </div>

Text with gradient line

To highlight some important text you can use gradient border in text.

Pagedone Design System

<div class="w-full relative">
      <p class="text-lg text-gray-800 font-semibold font-manrope">
      <span class="bg-gradient-to-r from-indigo-600 via-pink-600 to-purple-600 bg-[length:100%_5px] bg-no-repeat bg-bottom pb-2">Pagedone</span> Design System
      </p>
      </div>

Gradient background inside text

To highlight some important text you can use gradient background in text.

Pagedone Design System

<div class="w-full relative">
      <p class="text-lg text-gray-800 font-semibold font-manrope">
      <span class="bg-gradient-to-r from-indigo-600  to-purple-600  bg-no-repeat bg-bottom p-1 text-white">Pagedone</span> Design System
      </p>
      </div>

Gradient Button

You can add gradient background to buttons element also for visually appealing design.

<div class="w-full relative flex justify-center gap-5 flex-wrap items-center">
      <button class="m-4 p-0.5 rounded-full from-indigo-400 via-pink-500 to-purple-500 bg-gradient-to-r">
      <span class="block text-black px-4 py-2 font-semibold rounded-full bg-white hover:bg-transparent hover:text-white transition">Gradient Button</span>
      </button>
      <button class="m-4 p-0.5 rounded-full from-indigo-400 via-pink-500 to-purple-500 bg-gradient-to-r">
      <span class="block px-4 py-2 font-semibold rounded-full text-white transition hover:backdrop-brightness-110">Gradient Button</span>
      </button>
      </div>

Gradient Shadow

Add gradient shadow to card using tialwind css utility classes.

Learn how to make a glowing gradient background!

Read More 
<div class="relative group">
      <div class="absolute -inset-1 bg-gradient-to-r from-indigo-600 to-purple-400 rounded-lg blur opacity-40 group-hover:opacity-60 transition duration-1000 group-hover:duration-200"></div>
      <div class="relative px-7 py-6 bg-white ring-1 ring-gray-900/5 rounded-lg leading-none flex items-top justify-start space-x-6">
      <svg class="w-8 h-8 text-indigo-600" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M5 7C5 5.11438 5 4.17157 5.58579 3.58579C6.17157 3 7.11438 3 9 3H15C16.8856 3 17.8284 3 18.4142 3.58579C19 4.17157 19 5.11438 19 7V17.1136C19 18.8158 19 19.6668 18.4576 19.946C17.9152 20.2251 17.2226 19.7304 15.8375 18.7411L14.325 17.6607C13.2023 16.8588 12.6409 16.4578 12 16.4578C11.3591 16.4578 10.7977 16.8588 9.67505 17.6607L8.16248 18.7411C6.77738 19.7304 6.08484 20.2251 5.54242 19.946C5 19.6668 5 18.8158 5 17.1136V7Z" stroke="currentColor" stroke-width="1.6" class="my-path"></path>
      </svg>
      <div class="space-y-2">
      <p class="text-slate-800 pb-1 font-semibold">Learn how to make a glowing gradient background!</p>
      <a href="#" class="block text-indigo-600 transition duration-200 underline">Read More</a>
      </div>
      </div>
      </div>

Gradient types

You can add different gradient types by using taiwlind utilities classes.

Conic Gradient
Radial Gradient
linear Gradient 
 <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-2 overflow-hidden">
      <div class="w-72 h-52 bg-[conic-gradient(var(--tw-gradient-stops))] from-purple-600 via-pink-600 to-indigo-600 flex justify-center items-center ">
      <span class="text-lg text-white">Conic Gradient</span>
      </div>
      <div class="w-72 h-52 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-purple-600 via-pink-600 to-indigo-600 flex justify-center items-center ">
      <span class="text-lg text-white">Radial Gradient</span>
      </div>
      <div class="w-72 h-52 bg-gradient-to-t from-purple-600 via-pink-600 to-indigo-600 flex justify-center items-center ">
      <span class="text-lg text-white">linear Gradient</span>
      </div>
      </div>