README

Promare Gradients standardizes the use of neon colors for web backgrounds. It's a tiny stylesheet library that comes with over 25,000 different neon background combinations.

Neon colors have a high chroma. When they are contrasted they psychologically grab the users' attention¹. It's no wonder why neon signs have been used for call to actions.

Quick start

Here are some ways to start your own dramatic neon colored web presence:

• Download the latest release
• Clone the repo: git clone https://github.com/Ouxsoft/promare-gradients.git
• Install with npm: npm i @ouxsoft/promare-gradients
• Install with Composer: composer require ouxsoft/promare-gradients

Usage

Neon Colors

Promare Gradients features sixteen (16) base colors that were carefully chosen to embody neon lights:

green, ufo, lime, red, orange, yellow, absinthe, chartreuse, pink, magenta, plastic, purple, proton, blue, cyan, and grayscale.

<div class=".bg-blue">
    Call to Action
</div>

Shades and Tones

Each neon color comes in a regular form, two shades (*-0, *-25), and two tints (*-75, *-100). These classes color backgrounds a solid neon color:

Gradients

Combine any two of the above shades and tones to add a neon background gradient to your web page.

Example

<div class=".bg-blue-to-lime-75-nw">
    Blue to bright lime gradient moving in a top left direction
</div>
<div class=".bg-plastic-75-to-grayscale-0-se">
    Plastic purple to black moving in a bottom right direction
</div>

Direction of Gradient

The last suffix in the class defines the direction of the gradient. The below options are available:

Acknowledgements

Promare Gradients derives its name from the movie Promare which features rich neon gradient coloring and inspired this package.

Footnotes

1. Bojko, A. (2013). Eye tracking the user experience: A practical guide to research. Rosenfeld. ↩