PHPackages                             ouxsoft/promare-gradients - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. ouxsoft/promare-gradients

ActiveLibrary[Utility & Helpers](/categories/utility)

ouxsoft/promare-gradients
=========================

Promare Gradients standardizes the use of neon colors on the web for backgrounds..

v0.5.2(4y ago)01.7k[3 PRs](https://github.com/Ouxsoft/promare-gradients/pulls)Apache-2.0SCSS

Since Jan 19Pushed 3y ago1 watchersCompare

[ Source](https://github.com/Ouxsoft/promare-gradients)[ Packagist](https://packagist.org/packages/ouxsoft/promare-gradients)[ Docs](https://ouxsoft.com)[ RSS](/packages/ouxsoft-promare-gradients/feed)WikiDiscussions main Synced today

READMEChangelog (3)DependenciesVersions (7)Used By (0)

Promare Gradients
=================

[](#promare-gradients)

[![SASS](https://camo.githubusercontent.com/99ba03b19c62843f6588f03b3bec2d7c57646e26c545a9745c2f3ac0e1befc7b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d536173732d4343363639393f7374796c653d666c61742d737175617265266c6f676f3d73617373266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/99ba03b19c62843f6588f03b3bec2d7c57646e26c545a9745c2f3ac0e1befc7b/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f2d536173732d4343363639393f7374796c653d666c61742d737175617265266c6f676f3d73617373266c6f676f436f6c6f723d7768697465)[![npm version](https://camo.githubusercontent.com/0ef91824856078c00f4854ae38156ede7481cb5b5774cb4c7c4fde22f152e13d/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f406f7578736f66742f70726f6d6172652d6772616469656e7473)](https://www.npmjs.com/package/@ouxsoft/promare-gradients)[![Packagist Version](https://camo.githubusercontent.com/dbc98559ea87ccc239725b986fd211c311fc70ba84de01c9951775ef6082856a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6f7578736f66742f70726f6d6172652d6772616469656e74732e737667)](https://packagist.org/packages/Ouxsoft/promare-gradients)[![Github Release](https://camo.githubusercontent.com/2ada14601d0e49914226980e458194dda832105e3c979124b112822817d8b349/68747470733a2f2f736869656c64732e696f2f6769746875622f762f72656c656173652f6f7578736f66742f70726f6d6172652d6772616469656e74733f646973706c61795f6e616d653d72656c6561736526696e636c7564655f70726572656c656173657326736f72743d64617465)](https://github.com/Ouxsoft/promare-gradients/releases)[![Known Vulnerabilities](https://camo.githubusercontent.com/b276e5fb65ff09d830ecd993caa545918c06a53de5b04e34436f145c86312bdb/68747470733a2f2f736e796b2e696f2f746573742f6769746875622f4f7578736f66742f70726f6d6172652d6772616469656e74732f62616467652e737667)](https://snyk.io/test/github/Ouxsoft/promare-gradients)[![Total Downloads](https://camo.githubusercontent.com/0454d2f8931add4728cd1cd0373eadb4a46b69970e4d72c65ed4ad9dc372f755/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f4f7578736f66742f70726f6d6172652d6772616469656e74732e737667)](https://packagist.org/packages/Ouxsoft/promare-gradients)[![License](https://camo.githubusercontent.com/5b60841bea9e11d9d0b0950d690c9bc554e06385634056a7d5d62a15d1a4eabe/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4170616368655f322e302d626c75652e737667)](https://opensource.org/licenses/Apache-2.0)

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[1](#user-content-fn-1-07ef62f168a5de591f321a3ad463f146). It's no wonder why neon signs have been used for call to actions.

Quick start
-----------

[](#quick-start)

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

- [Download the latest release](https://github.com/Ouxsoft/promare-gradients/releases)
- Clone the repo: `git clone https://github.com/Ouxsoft/promare-gradients.git`
- Install with [npm](https://www.npmjs.com/): `npm i @ouxsoft/promare-gradients`
- Install with [Composer](https://getcomposer.org/): `composer require ouxsoft/promare-gradients`

### Usage

[](#usage)

#### Neon Colors

[](#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`.

```

    Call to Action

```

#### Shades and Tones

[](#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:

RegularDarkestDarkLightLightest.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

[](#gradients)

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

**Example**

```

    Blue to bright lime gradient moving in a top left direction

    Plastic purple to black moving in a bottom right direction

```

##### Direction of Gradient

[](#direction-of-gradient)

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

SuffixDirection\*-nwNorthwest\*-neNortheast\*-swSoutheast\*-swSouthwestAcknowledgements
----------------

[](#acknowledgements)

Promare Gradients derives its name from the movie [Promare](https://en.wikipedia.org/wiki/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. [↩](#user-content-fnref-1-07ef62f168a5de591f321a3ad463f146)

###  Health Score

23

—

LowBetter than 27% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity15

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity43

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

3

Last Release

1571d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/5bb6e7035bea76f555b113179854f4f0ab66b823ddf84967ba320b5bcc5a3ddb?d=identicon)[hxtree](/maintainers/hxtree)

---

Top Contributors

[![hxtree](https://avatars.githubusercontent.com/u/19890291?v=4)](https://github.com/hxtree "hxtree (29 commits)")

---

Tags

webcsssassneongradients

### Embed Badge

![Health badge](/badges/ouxsoft-promare-gradients/health.svg)

```
[![Health](https://phpackages.com/badges/ouxsoft-promare-gradients/health.svg)](https://phpackages.com/packages/ouxsoft-promare-gradients)
```

###  Alternatives

[scssphp/scssphp

scssphp is a compiler for SCSS written in PHP.

62827.7M220](/packages/scssphp-scssphp)[onokumus/metismenu

A jQuery menu plugin

2.0k263.3k5](/packages/onokumus-metismenu)[panique/laravel-sass

Compiles your Sass .scss files to .css every time you run your app (in development)

73171.8k1](/packages/panique-laravel-sass)[onokumus/metismenujs

A menu plugin

13210.2k](/packages/onokumus-metismenujs)[efficiently/larasset

Larasset is a library for Laravel 5 which manage assets in an easy way.

684.8k](/packages/efficiently-larasset)[trentrichardson/cakephp-shrink

Compiles, combines, and minifies javascript, coffee, less, scss, and css

1619.3k](/packages/trentrichardson-cakephp-shrink)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)