Create Stunning, Animated Gradients with Ease.

MindGradient is a modern, lightweight, and fully customizable CSS library for beautiful gradients. No complex configuration, just simple classes.

Just add a class name to any element to apply a beautiful gradient.

Easily override colors using simple CSS variables to match your brand.

Bring your design to life with an optional subtle, elegant animation.

A tiny footprint means your site stays fast and responsive. No bloat.

Get Started in Seconds

Choose your preferred method to include MindGradient in your project.

The quickest way is to link the stylesheet directly in your HTML's ``.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iqbalmind/mindgradient/mindgradient.css">

Install the package using npm or your favorite package manager.

npm install mindgradient

Then, import the CSS file into your main stylesheet or JavaScript file.

@import 'mindgradient/mindgradient.css';

Add the desired gradient class and the optional animation class to any element.

<div class="grd-sunset grd-animated">Your Content Here</div>

In your own CSS file, override the color variables for any gradient.

.grd-sunset {
    --grd-color-1: #0052D4;
    --grd-color-2: #9CECFB;
}

Visually create, customize, and fine-tune your own gradients with our real-time generator. Get the perfect look, then copy the CSS with one click.

MindGradient is free and open-source, licensed under MIT. We welcome all contributions and ideas to make it even better.