Gradient.js

clean, lean, fresh, easy, adjectives; all the things your website needs.

Download

CDN Link

Put this tag at the bottom of your page


                <script src="https://cdn.jsdelivr.net/gh/PiethonCoder/gradient.js/gradient.min.js"></script>

Basic Syntax

gradient.js lets you give dynamic gradient backgrounds to elements with ease.
By using the gradient class, or shorthand you can just put g, along with any colors you want,
like g-pink-aqua, the brower will render a unique gradient pattern on every page load.


                <div class="g-pink-aqua"></div>
                <div class="gradient-pink-aqua"></div>

Color Values

Keyword, hex,rgb, and hsl colors all work, as long as they dont contain a space.


                <div class="g-blue-pink"></div>
                <div class="g-#0000ff-#ffc0cb"></div>
                <div class="g-rgb(255,192,203)-rgb(0,0,255)"></div>
                <div class="g-hsl(350,100%,88%)-hsl(240,100%,50%)"></div>

Color Complements

The gc class will find the complementary color for whatever color its given.


                <div class="gc-pink"></div>

Solo Color

if the g class is only given one color, it makes a gradient with shades of that color.


                <div class="g-red"></div>
                <div class="g-blue"></div>
                <div class="g-yellow"></div>
                <div class="g-orange"></div>

Multi Color

There isint any limit to how many colors can be added.


                <div class="g-crimson-teal-pink-orange"></div>
                <div class="g-steelblue-purple-black"></div>
                <div class="g-#FF6B6B-#556270-#FFA17F"></div>

Random Colors

You can generate a random color combination if you just omit any colors from the gradient class.


                <div class="g"></div>