https://github.com/cristicretu/meshgrad

🎨 Generate CSS Mesh Gradients
https://github.com/cristicretu/meshgrad

css-gradients gradient gradient-generator mesh-gradient

Last synced: 5 months ago
JSON representation

🎨 Generate CSS Mesh Gradients

• Host: GitHub
• URL: https://github.com/cristicretu/meshgrad
• Owner: cristicretu
• License: mit
• Created: 2022-08-05T18:32:16.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-11-18T19:58:53.000Z (over 2 years ago)
• Last Synced: 2024-08-02T22:25:24.754Z (almost 2 years ago)
• Topics: css-gradients, gradient, gradient-generator, mesh-gradient
• Language: TypeScript
• Homepage: https://meshgrad.cretu.dev
• Size: 7.1 MB
• Stars: 82
• Watchers: 1
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          






# 🎨 Meshgrad ![meshgrad minzip package size](https://img.shields.io/bundlephobia/minzip/meshgrad) ![meshgrad package version](https://img.shields.io/npm/v/meshgrad.svg?colorB=blue)

Meshgrad is a tiny utility to generate native-CSS Mesh Gradients.

[Demo - meshgrad.cretu.dev](https://meshgrad.cretu.dev/)

## Install

```bash

$ npm install meshgrad

```

## Use

### Options:

- length: _number_ - ammount of color stops

- baseColor: _string_ - hex string that specifies the root color

- hash: _number_ - specify a number that will generate the same position each time

### Vanilla Javascript

```js

  import { generateMeshGradient } from "https://cdn.skypack.dev/meshgrad";

  // Number of color stops

  const ELEMENTS = 6;

  document.getElementById("box");

  box.style = generateMeshGradient(ELEMENTS);



```


### Svelte

```js

import { generateMeshGradient } from 'meshgrad';

// Number of color stops

const ELEMENTS = 6;



```


### React JSX

```jsx

import { generateJSXMeshGradient } from "meshgrad";

// Number of color stops

const ELEMENTS = 6;

export function App() {

  return 
;

}

```


### License

MIT