@cats-cradle/promare-gradients

Promare Gradients makes it easy to set neon colors backgrounds. It's a tiny stylesheet library that comes with over 25,000 different neon background solid and gadient combinations.

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

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:

| Regular | Darkest | Dark | Light | Lightest | | -------------- | ---------------- | ----------------- | ----------------- | ------------------ | | .bg-green | .bg-green-0 | .bg-green-25 | .bg-green-75 | .bg-green-100 | | .bg-ufo | .bg-ufo-0 | .bg-ufo-25 | .bg-ufo-75 | .bg-ufo-100 | | .bg-lime | .bg-lime-0 | .bg-lime-25 | .bg-lime-75 | .bg-lime-100 | | .bg-red | .bg-red-0 | .bg-red-25 | .bg-red-75 | .bg-red-100 | | .bg-orange | .bg-orange-0 | .bg-orange-25 | .bg-orange-75 | .bg-orange-100 | | .bg-yellow | .bg-yellow-0 | .bg-yellow-25 | .bg-yellow-75 | .bg-yellow-100 | | .bg-absinthe | .bg-absinthe-0 | .bg-absinthe-25 | .bg-absinthe-75 | .bg-absinthe-100 | | .bg-chartreuse | .bg-chartreuse-0 | .bg-chartreuse-25 | .bg-chartreuse-75 | .bg-chartreuse-100 | | .bg-pink | .bg-pink-0 | .bg-pink-25 | .bg-pink-75 | .bg-pink-100 | | .bg-magenta | .bg-magenta-0 | .bg-magenta-25 | .bg-magenta-75 | .bg-magenta-100 | | .bg-plastic | .bg-plastic-0 | .bg-plastic-25 | .bg-plastic-75 | .bg-plastic-100 | | .bg-purple | .bg-purple-0 | .bg-purple-25 | .bg-purple-75 | .bg-purple-100 | | .bg-proton | .bg-proton-0 | .bg-proton-25 | .bg-proton-75 | .bg-proton-100 | | .bg-blue | .bg-blue-0 | .bg-blue-25 | .bg-blue-75 | .bg-blue-100 | | .bg-cyan | .bg-cyan-0 | .bg-cyan-25 | .bg-cyan-75 | .bg-cyan-100 | | .bg-grayscale | .bg-grayscale-0 | .bg-grayscale-25 | .bg-grayscale-75 | .bg-grayscale-100 |

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:

| Suffix | Direction | | ------ | --------- | | *-nw | Northwest | | *-ne | Northeast | | *-sw | Southeast | | *-sw | Southwest |

Acknowledgements

Promare Gradients is named after the movie Promare which features rich neon gradient coloring and inspired this package.

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