benhowdle89/grade

★ 3,764JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((grade))
    What it does
      Reads image colors
      Generates gradient
      Applies to background
    How it works
      HTML5 Canvas
      Dominant color extract
      CSS gradient output
    Use cases
      Album art pages
      Product galleries
      Movie poster sites
    Setup
      npm install
      CDN link
      Wrap in container

mindmap root((grade)) What it does Reads image colors Generates gradient Applies to background How it works HTML5 Canvas Dominant color extract CSS gradient output Use cases Album art pages Product galleries Movie poster sites Setup npm install CDN link Wrap in container

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add auto-generated color gradient backgrounds to album art on a music streaming or playlist page

USE CASE 2

Make product photos feel integrated with the page by wrapping them in matching color gradients

USE CASE 3

Build a movie or book cover gallery where each image has its own coordinated background

USE CASE 4

Extract dominant colors from images and use them to theme other UI elements on the page

Tech stack

JavaScriptHTML5 CanvasnpmCDN

Getting it running

Difficulty · easy Time to first run · 5min

Images must allow cross-origin access if hosted on a different domain, requires CORS headers on the image server.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Grade is a small JavaScript library that looks at an image on a web page and automatically generates a matching color gradient for the background behind it. It picks the two most prominent colors from the image and blends them into a smooth gradient that wraps the image in a visually coordinated frame, without any manual color picking required. The typical use case is a music or movie app, a product page, or any design where you want album art, poster images, or product photos to feel integrated with the surrounding page rather than floating on a plain white or fixed-color background. Instead of choosing a background color yourself, Grade reads the image and figures out what fits. Setup is straightforward: you wrap each image in a container element, then call the library with a reference to those containers. Grade scans each image using the browser's built-in canvas drawing system, extracts the dominant colors, and applies the resulting gradient as a CSS background on the container. No server-side processing is involved. The library can be added to a project by downloading the file directly, loading it from a CDN, or installing via npm. There is also an option to receive the gradient data as a JavaScript object rather than having it applied to the page automatically, which lets developers use the extracted colors in their own way. One practical limitation: because the library reads pixel data from images using the browser's canvas element, it cannot process images hosted on a different domain unless that domain has been configured to permit cross-origin access. The README includes instructions for enabling this on Amazon S3. The library is released under the MIT license.

Copy-paste prompts

Prompt 1

Write JavaScript using Grade.js to automatically apply color gradient backgrounds to all images with class album-cover on my page.

Prompt 2

How do I set up Grade.js to return the extracted gradient colors as a JavaScript object instead of applying them to the page?

Prompt 3

My images are hosted on S3 and Grade.js throws a canvas cross-origin error. How do I fix the CORS configuration on S3?

Prompt 4

Using Grade.js, how do I make gradient backgrounds update dynamically when a user swipes through a carousel of album art?

Prompt 5

Show me a complete HTML example using Grade.js to wrap product images in auto-generated gradient backgrounds.

Open on GitHub → Explain another repo

← benhowdle89 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.