Package Exports

meshgrad
meshgrad/dist/index.js
meshgrad/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (meshgrad) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🎨 Meshgrad

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

Demo - meshgrad.cretu.dev

Install

$ 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

<script type="module">
  import { generateMeshGradient } from "https://cdn.skypack.dev/meshgrad";

  // Number of color stops
  const ELEMENTS = 6;

  document.getElementById("box");
  box.style = generateMeshGradient(ELEMENTS);
</script>

<div id="box" class="..." />

Svelte

<script>
import { generateMeshGradient } from 'meshgrad';

// Number of color stops
const ELEMENTS = 6;
</script>

<div style={generateMeshGradient(ELEMENTS)} class="..."/>

React JSX

import { generateJSXMeshGradient } from "meshgrad";

// Number of color stops
const ELEMENTS = 6;

export function App() {
  return <div style={generateJSXMeshGradient(ELEMENTS)} className="..." />;
}