Search code examples
cssreactjsbackgroundtailwind-css

How to use background with linear gradient in Tailwind css

i want to use this color in my background

linear-gradient(355.45deg, #FFFFFF 11.26%, rgba(255, 255, 255, 0) 95.74%)

i know that how to this color in my background using css. but how to use this color using tailwind css.

Solution

  • You can use this linear gradient in the bg-[] utility of Tailwind.

    • Make sure to remove any spaces from the string to make it work.
    • Use rgba() for defining colors instead of hex color codes
    bg-[linear-gradient(355.45deg,rgba(255,255,255,100%)11.26%,rgba(255,255,255,0)95.74%)]


    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-black">
  <h1 class="text-3xl font-bold underline bg-[linear-gradient(355.45deg,rgba(255,255,255,100%)11.26%,rgba(255,255,255,0)95.74%)]">
    Hello world!
  </h1>
</body>

</html>