Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
index.js
package-lock.json
package.json
preview.gif

README.md

Travis build status Codecov branch npm downloads MIT License

gzip size size

Maintainability PRs Welcome

my-gradient-background

What?

A Web Component for an element gradient transition.

Gradient background transitioning to different colors

Getting started

npm install --save my-gradient-background

Usage

const MyGradientBackground = require("my-gradient-background");

if (!window.customElements.get("my-gradient-background")) {
  window.customElements.define("my-gradient-background", MyGradientBackground);
}
<my-gradient-background gradient="red, white, blue"></my-gradient-background>

<script type="text/javascript">
  const gradientEle = document.querySelector("my-gradient-background");

  window.setTimeout(() => {
      // use any linear-gradient color
      // https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
      gradientEle.setAttribute("gradient", "#e66465, #9198e5");
  }, 2500);
</script>
You can’t perform that action at this time.