https://github.com/narkoz/zint
Modern, pre-built CSS gradients for text, using the OKLCH color model
https://github.com/narkoz/zint
css npm-package sass
Last synced: 3 months ago
JSON representation
Modern, pre-built CSS gradients for text, using the OKLCH color model
- Host: GitHub
- URL: https://github.com/narkoz/zint
- Owner: NARKOZ
- License: bsd-2-clause
- Created: 2025-07-01T23:12:07.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-02T19:27:30.000Z (3 months ago)
- Last Synced: 2025-07-02T20:28:05.020Z (3 months ago)
- Topics: css, npm-package, sass
- Language: SCSS
- Homepage: https://narkoz.github.io/zint/
- Size: 17.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Zint
Modern, ready-to-use CSS gradients for text, built entirely with the OKLCH color
model.
[**Live Demo**](https://narkoz.github.io/zint/)
## Installation
Install the package from the npm registry:
```sh
npm install zint
```
## Usage
You can include the CSS in your project using multiple methods:
- **Import the compiled CSS directly** in your stylesheet or JavaScript file.
- **Use the Sass source** to customize or extend styles in your own Sass/SCSS files.
- **Load the CSS from a CDN** for quick integration without installing the package.
Choose the method that best fits your workflow and project needs.
### Compiled CSS
Import the compiled CSS in your main stylesheet or directly in your JavaScript/TypeScript entry file:
```css
@import "~zint/dist/zint.css";
```
or, with webpack/Vite/Parcel, directly in JS:
```js
import 'zint/dist/zint.css';
```
### Sass Source
If you want to customize variables or use mixins, import the main Sass file in your Sass/SCSS entry:
```scss
@use "zint/src/zint";
```
### CDN
Link the stylesheet in your HTML:
```html
```
Then, apply the gradient classes to your text elements:
```html
Hello, World!
```
## Available Gradients
* `zint-aqua-flora`
* `zint-azure-tide`
* `zint-coral-glow`
* `zint-deep-sea-mist`
* `zint-dreamy-haze`
* `zint-forest-stream`
* `zint-fuchsia-flash`
* `zint-galactic-beam`
* `zint-glacial-ice`
* `zint-graphite-sheen`
* `zint-liquid-gold`
* `zint-meadow-spring`
* `zint-neon-fusion`
* `zint-pastel-morning`
* `zint-phoenix-fire`
* `zint-solar-flare`
* `zint-starlit-abyss`
* `zint-supernova-burst`
* `zint-tropical-zest`
* `zint-volcanic-sunset`
## License
Released under the BSD 2-clause license. See LICENSE.txt for details.