freegradient.com is a fast, free library of 3000+ gradients and 4000+ color palettes with a full set of browser-based color tools. Copy CSS, build your own, and download GRD, SVG, and PNG. No signup needed to browse or copy.
This repository holds the free, MIT-licensed datasets and small helpers that sit behind the site. If you want the live tools, use freegradient.com.
Turn any CSS gradient into a real Photoshop .grd file, and read .grd files back to CSS.
This is the standout tool: paste a CSS, HEX, or RGB gradient and download a
byte-perfect Photoshop gradient you can load straight into Photoshop, or upload a
.grd and get every gradient as CSS and hex.
- CSS to GRD → freegradient.com/tools/css-to-grd
- GRD parser (GRD to CSS) → freegradient.com/tools/grd-parser
Supports linear and radial gradients, multiple color stops, and opacity stops. No signup to convert. Works in the browser.
Color and gradient:
- Gradient library: 3000+ gradients,
copy CSS, Tailwind, and SVG, download free
.grdand.png. - Color palettes: 4000+ four-color palettes, copy hex, RGB, and OKLCH.
- Gradient backgrounds: 1000 large-format gradient wallpapers, free PNG.
- Gradient builder: multi-stop linear, radial, diamond, angle, and reflected gradients with CSS export.
- Image to gradient: pull a gradient off any image with draggable sample handles.
- Color editor and visualizer: shade, saturation, hue, temperature, luminance, colorblind, WCAG contrast, and theme.
- GRD parser: read a Photoshop
.grdfile as CSS and hex. - CSS to GRD: generate a
.grdfrom a CSS gradient, HEX, RGB, HTML, or BBCode colors. - Gradient buttons: 30 copy-paste CSS button styles.
Text tools:
- Fancy text generator: 25+ Unicode font styles to copy and paste.
- Gradient text colorizer: color text letter by letter as BBCode, HTML, CSS, or Tailwind, with any font.
- Big text generator: large, boxed, circled, and full-width letters.
- Text decorator: wrap text in hearts, stars, and symbol borders.
- Case converter: lowercase, UPPERCASE, capitalize, sentence, random, and normalize.
- Strikethrough text: cross out text 10 ways, strike, tilde, slash, underline, and overline.
- Character counter: count characters, words, sentences, and reading time.
Developer:
- Data Forge: chain data operations into a recipe, Base64, hex, URL, binary, Base32, ROT13, XOR, Caesar, Morse, MD5, SHA-1/256/512, JSON, JWT, timestamps, and more.
Plus a JSON API (Pro) for gradients, palettes, tags, converters, and random endpoints, dark and light themes, fast pages, mobile first.
data/gradients.json: 174 curated gradients with color stops and ready CSS (the site has 3000+).data/palettes.json: 600 four-color palettes with hex and RGB, sampled from the 4000+ on the site.data/tags.json: category tags used across the sets.src/gradient.js: tiny helpers:toCss,hexToRgb,rgbToHex,codeToColors.
npm install free-gradient-toolsOr copy the JSON files you need.
import { toCss, codeToColors } from "free-gradient-tools";
import gradients from "free-gradient-tools/data/gradients.json" assert { type: "json" };
document.body.style.background = gradients.gradients[0].css; // ready to use
const css = toCss(
[{ color: "#7c5cff", pos: 0 }, { color: "#22d3ee", pos: 100 }],
120,
);
codeToColors("222831393e4600adb5eeeeee");
// ["#222831", "#393e46", "#00adb5", "#eeeeee"]Gradient:
{ "name": "Warm Flame", "slug": "warm-flame", "angle": 45,
"colors": ["#ff9a9e", "#fad0c4"],
"stops": [{ "color": "#ff9a9e", "pos": 0 }, { "color": "#fad0c4", "pos": 100 }],
"css": "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%)" }Palette:
{ "code": "222831393e4600adb5eeeeee",
"colors": ["#222831", "#393e46", "#00adb5", "#eeeeee"],
"rgb": [[34,40,49],[57,62,70],[0,173,181],[238,238,238]],
"tags": ["dark", "grey", "teal"] }Free CSS gradients, gradient generator, gradient background, CSS gradient tools, color palette generator, gradient buttons, image to gradient, Photoshop grd, color contrast checker, colorblind simulator.
MIT. Color values are facts and free to use. The curated gradient set is MIT.
Built by 720pixel · Live at freegradient.com.