Tailwindcss Bggradient screenshot

Tailwindcss Bggradient

Author Avatar Theme by Czernika
Updated: 22 Oct 2025
16 Stars

Overview

The TailwindCSS gradients plugin is a powerful tool specifically designed for users of TailwindCSS version 3. This plugin enhances the utility of TailwindCSS by allowing developers to implement linear gradients with specified angles effectively. However, it’s important to note that this plugin does not support TailwindCSS version 4 and beyond, which may limit its use for those looking to upgrade.

Moreover, this plugin makes it incredibly easy to integrate gradients into your designs with minimal effort. By simply adding the appropriate class, you can create stunning visual effects that enhance the overall aesthetic of your web projects.

Features

  • Supports Version 3: Specifically designed to work with TailwindCSS version 3, ensuring compatibility with existing projects using this version.
  • Gradient Angles: Allows usage of degrees in CSS gradients, providing more precise control over the gradient direction.
  • Simple Installation: Easily installable via popular package managers like Npm, Yarn, Pnpm, and Bun.
  • Background Gradient Utility: Use the utility classes such as bg-gradient-{degrees} to define your desired linear gradient angle quickly.
  • Default Utilities: Offers a list of pre-defined utilities ranging from bg-gradient-0 to bg-gradient-180, allowing for various gradient options.
  • Alias Support: Since version 1.1.0, every utility has an alias for better readability, such as bg-gradient-to-45, which indicates the direction of the gradient.
  • Generated CSS: Automatically generates CSS properties like background-image: linear-gradient(...), streamlining the development process.