Gradient Generator

A Raycast extension to create, preview, randomize, save and export gradients, using them in your next project.
Install the extension »

Report Bug · Request Feature

Table of Contents

• About The Project
  • Features
  • Built With
• Getting Started
  • Prerequisites
  • Install
  • Usage
• Back Matter
  • Roadmap
  • Contributing
  • License

About The Project

Gradient Generator is a minimalist, local-first Raycast extension for crafting gradients. Create a gradient, preview it in a large panel, copy ready-to-use snippets (CSS, SwiftUI, Tailwind arbitrary value), generate random gradients, and save your favorites locally.

Features

• Create linear, radial, or conic gradients (with angle for linear)
• Large preview and gradient metadata
• Copy snippets: CSS, SwiftUI, Tailwind arbitrary value
• Random gradient generator (2–3 stops, now with explicit control over stop count)
• Saved gradients list with quick preview, inline rename (⌘R), and delete
• Export gradients as PNG (copy to clipboard or save at preset/custom sizes, with optional transparency)
• Export gradients as scalable SVG markup (ideal for Figma, web, or design workflows)
• Tailwind export mode toggle (switch between arbitrary class or plain CSS)
• Local storage only (no network calls)
• Improved form ergonomics: better tab order, conditional angle field, and reset action
• Validation hardening: no crashes from invalid stops or colour input

Built With

• TypeScript + React
• @raycast/api, @raycast/utils

Getting started

Prerequisites

• macOS with Raycast installed

Install

From Raycast Store (production):

Install via Raycast Store

From source (development):

npm install
npm run dev

Build locally:

npm run build

Commands

• Create Gradient — form to define type, colours, and angle; pushes to Preview
• Random Gradient — generates a random 2–3 stop gradient (user can now choose stop count) and shows Preview
• Saved Gradients — list of saved gradients with colour tags; inline rename (⌘R); open Preview; delete

Back Matter

Contributing

Contributions welcome. Please open an issue to discuss changes first.

1. Fork the project
2. Create a feature branch (git checkout -b feature/my-change)
3. Commit your changes (git commit -m 'feat: ...')
4. Push to your branch (git push origin feature/my-change)
5. Open a Pull Request

License

MIT — see LICENSE for details.