UNPKG

mindgradient

Version:

A modern, customizable, and easy-to-use CSS gradient library for creating beautiful, animated gradients.

code.iqbalmind.id/mindgradient/

iqbalmind/mindgradient

79 lines (55 loc) â€Ē 2.5 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
# MindGradient CSS A modern, customizable, and easy-to-use CSS gradient library for creating beautiful, animated gradients. 👉 [Live Demo & Generator](http://code.iqbalmind.id/mindgradient/) MindGradient is a lightweight, plug-and-play CSS library that allows you to add stunning, animated gradients to any HTML element with just a single class. It's built with customization in mind, using modern CSS variables to make theming a breeze. --- ## âœĻ Features - ðŸŽĻ **16+ Beautiful Presets** – A curated collection of modern, elegant gradients. - âœĻ **Subtle Animations** – An optional animation class to bring your gradients to life. - 🛠 **Fully Customizable** – Easily change gradient colors using CSS variables. - ðŸŠķ **Feather-light** – Tiny footprint with zero dependencies. - ⚙ **Interactive Generator** – Visually create your own gradients and get the code instantly. --- ## ðŸ“Ķ Installation ### CDN The quickest way is to link the stylesheet directly in your HTML `<head>` tag: ```html <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iqbalmind/mindgradient@latest/mindgradient.css"> ``` ### NPM Install the package using your favorite package manager: ```npm npm install mindgradient ``` Then, import the CSS file into your main stylesheet or JavaScript file: ```css /* In your main CSS file */ @import 'mindgradient/mindgradient.css'; ``` ## 🚀 Usage Add the desired gradient class (e.g., `.grd-sunset`) to any element. (Optional) Add the .grd-animated class to enable subtle animation. ```css <!-- A simple static gradient --> <div class="grd-sunset"></div> <!-- An animated gradient --> <div class="grd-ocean grd-animated"></div> ``` ## ðŸŽĻ Customization Override the default colors of any gradient by redefining its CSS variables in your own stylesheet. Make sure your custom rules are loaded after mindgradient.css. ```css /* your-styles.css */ .grd-sunset { --grd-color-1: #0052D4; /* A new starting blue */ --grd-color-2: #9CECFB; /* A new ending cyan */ } ``` ## ðŸĪ Contributing Contributions are welcome! If you have ideas for new gradients, features, or improvements, please open an issue or submit a pull request on the GitHub repository ## Changelog See [CHANGELOG.md](./CHANGELOG.md) for details. ## 📜 License This project is licensed under the MIT License – see the [LICENSE](https://github.com/iqbalmind/mindgradient/blob/main/LICENSE) file for details. Made with âĪ by [IqbalMind](http://iqbalmind.id/)