Gradient — CSS Gradient Generator & Palette Builder#

Generate production-ready CSS gradient code for linear, radial, and conic gradients. Create gradient palettes, preview combinations, adjust angles and color stops, and export gradient collections. All gradient definitions are stored locally in JSONL format for reuse and sharing.

Prerequisites#

• Python 3.6+
• Bash 4+

Data Storage#

All gradient records and palettes are stored in ~/.gradient/data.jsonl. Each record is a JSON object with fields including id, name, type (linear, radial, conic), css, stops, angle, created_at, and additional metadata.

Commands#

Run via: bash scripts/script.sh <command> [options]

CommandDescriptioncreateCreate a new gradient with type, colors, angle, and optional namelistList all saved gradients with names, types, and CSS previewgetGet full details and CSS code for a specific gradient by ID or nameupdateUpdate an existing gradient's colors, angle, or namedeleteRemove a gradient from the collection by IDlinearShortcut to generate a linear gradient with angle and color stopsradialShortcut to generate a radial gradient with shape, position, and stopsconicShortcut to generate a conic gradient with start angle and stopsrandomGenerate random gradients with optional constraints on hue or typepaletteGenerate a collection of related gradients from a base colorexportExport gradients as CSS classes, Tailwind config, or SCSS variablespreviewGenerate an HTML preview page for one or all gradientshelpShow usage informationversionPrint the tool version

Usage Examples#

bash

# Create a simple linear gradient
bash scripts/script.sh create --name sunset --type linear --angle 135 --stops "#ff6b6b,#feca57,#48dbfb"

# Shortcut for linear gradient
bash scripts/script.sh linear --angle 90 --stops "#667eea,#764ba2"

# Create a radial gradient
bash scripts/script.sh radial --shape circle --position center --stops "#00d2ff,#3a7bd5"

# Create a conic gradient
bash scripts/script.sh conic --from 0 --stops "#ff0000,#00ff00,#0000ff,#ff0000"

# List all saved gradients
bash scripts/script.sh list

# Get details for a gradient
bash scripts/script.sh get --id abc123

# Update a gradient
bash scripts/script.sh update --id abc123 --angle 180 --stops "#e74c3c,#9b59b6"

# Delete a gradient
bash scripts/script.sh delete --id abc123

# Generate 5 random gradients
bash scripts/script.sh random --count 5

# Generate gradients with warm hues only
bash scripts/script.sh random --count 3 --hue 0-60

# Build a palette from a base color
bash scripts/script.sh palette --color "#3498db" --count 5

# Export as CSS
bash scripts/script.sh export --format css --output gradients.css

# Export as Tailwind config
bash scripts/script.sh export --format tailwind --output tailwind-gradients.js

# Generate HTML preview
bash scripts/script.sh preview --output preview.html

Output Format#

create, linear, radial, and conic output the CSS gradient string to stdout. list returns a formatted table. get returns full JSON metadata. export writes to the specified file format. preview generates a self-contained HTML file.

Notes#

• Gradient types: linear, radial, conic.
• Linear gradients support angles in degrees (0-360) or keywords ( to right, to bottom left).
• Radial gradients support shapes: circle, ellipse; positions: center, top left, etc.
• Color stops accept hex ( #rrggbb), rgb(), hsl(), or CSS named colors.
• Each stop can include an optional position percentage: #ff0000:30%.
• The palette command generates harmonious gradient variations from a single base color.
• Export formats: css (classes), tailwind (JS config), scss (variables with mixins).
• Preview HTML includes responsive cards showing each gradient with its CSS code.

---

Powered by BytesAgain | bytesagain.com | hello@bytesagain.com