Gradient Card Generator

Gradient Card Generator

Client-side gradient image generator

written by
In Search of an Image - "No Image Associated with this article": an image by

Gradient Card Generator

Create blue-biased gradient image cards with layered patterns, blend modes, film grain, and vignette effects.

ACTIVE webapp Updated February 21, 2026
Open Tool ← All tools
Gradient Card Generator hero image

What it does

Gradient Card Generator creates polished, export-ready image backgrounds directly in your browser. It supports linear/radial/conic gradients, two pattern overlay layers, blend modes, film grain, and vignette effects.

How to use it

  • Open: https://tedt.org/tools/gradient-card.html
  • Tune the controls live in the right panel.
  • Click Randomize for a fresh blue-forward composition.
  • Click Download PNG to export at the current canvas resolution.

Notes

  • Runs fully client-side (no upload required).
  • Settings can be copied and restored via JSON presets for repeatable output.

Details

Tech
  • JavaScript
  • HTML
  • CSS
License
MIT
Tags
gradient image canvas design javascript tools

Features

  • Interactive linear, radial, and conic gradient generation
  • Two configurable pattern overlays with blend modes
  • Film grain and vignette effects
  • Settings copy/restore through JSON
  • Local PNG export at custom resolution