Gradient Picker
Powerful and beautiful gradient picker and CSS gradient generator. Gradient editor and parser.
Open the official app on gradient-picker.vercel.app
This tool is hosted by its maintainers. Click below to open gradient-picker.vercel.app in a new tab — it's their official demo.
Browse design tools →What's next with Gradient Picker?
Choose how you want to get started.
Use it free
Open the official tool or demo — no account needed.
Self-host it
Run the open-source version on your own infrastructure.
What is Gradient Picker?
Gradient Picker is an open-source project maintained by acrodata, licensed under the MIT license, and currently has 26 GitHub stars. Described as a powerful and beautiful gradient picker, it is specifically designed for Angular applications (supporting Angular version >= 17, version 0.x). The tool solves the complexity of gradient creation and selection in web development by providing a dedicated package, @acrodata/gradient-picker, that brings gradient handling capabilities to developers. Its key capabilities include full CSS gradient syntax support, full touch support, accessibility (a11y) and keyboard support, multiple modular components, and multiple CSS variables for extensive styling customization. Developers can test the tool directly via its online playground hosted at acrodata.github.io/gradient-picker, or integrate it into their Angular projects using npm.
How it works
Gradient Picker is distributed as an open-source project under the MIT license, with the package name @acrodata/gradient-picker. It is built specifically for the Angular ecosystem, requiring Angular version 17 or higher. The package integrates with Angular's forms module (FormsModule) for value binding and utilizes modular TypeScript component imports. It relies on full CSS gradient syntax and exposes an extensive list of CSS custom properties (variables) starting with the `--gp-` prefix—such as `--gp-container-width`, `--gp-container-elevation-shadow`, `--gp-input-outline-color`, and `--gp-unit-select-hover-backgrou`—to allow deep styling control over containers, inputs, radio buttons, and unit selection elements.
How to use it
- 1Install the package in your Angular project by running the command `npm install @acrodata/gradient-picker --save` in your terminal.
- 2Import the `Component` from `@angular/core`, `FormsModule` from `@angular/forms`, and `GradientPicker` (or specific picker components like `LinearGradientPicker`, `RadialGradientPicker`, and `ConicGradientPicker`) from `@acrodata/gradient-picker` into your TypeScript file.
- 3Configure your component class by defining a selector, template, and importing the required forms and picker modules in the component decorator.
- 4Set up a property in your component class to hold the gradient value string, such as `value = 'linear-gradient(45deg, blue, red)'` or specific type values.
- 5Customize the appearance of the picker using the available CSS variables such as `--gp-container-width`, `--gp-container-background-color`, and `--gp-input-background-color` in your styles.
What it can do
- Parsing
Use cases
Assumptions and limitations
Assumptions
- source: https://github.com/acrodata/gradient-picker
- license: MIT — free to use
- privacy: Opens an external demo
Limitations
- Specific known limitations are not specified in the provided documentation.
- Requires Angular version 17 or higher (version >= 17, 0.x), making it incompatible with older versions of Angular without an upgrade.
- Package scope is currently limited to the provided Angular components (@acrodata/gradient-picker) and does not natively list framework-agnostic or React/Vue implementations in the source documentation.
Understanding the result
Powerful and beautiful gradient picker and CSS gradient generator. Gradient editor and parser.
Tool details
- Clearly flagged when a network request is needed.
- No account, no sign-up, and no tracking of your content.
- Powered by gradient-picker (MIT).
- Built with
- gradient-picker (acrodata/gradient-picker)
- License
- MIT
- Runs locally
- No — requires a network request
- Verification
- Not yet verified
- Input
- Text Input
- Output
- Processed Output
Built with acrodata/gradient-picker. OpenToolVault provides the discovery and browser interface while crediting the original project maintainers.
- Built with
- gradient-picker
- License
- MIT
Open-source project
OpenToolVault is an independent directory. We are not affiliated with or endorsed by this project.
References
- acrodata/gradient-picker — GitHub Repository
Upstream project · GitHub
- MIT License
Upstream project
Frequently asked
What Angular versions are supported by Gradient Picker?
Gradient Picker supports Angular version >= 17 (version 0.x).
How do I install Gradient Picker in my project?
You can install it using npm with the command: npm install @acrodata/gradient-picker --save.
Can I use specific gradient types like radial or conic separately?
Yes, you can import modular components such as LinearGradientPicker, RadialGradientPicker, and ConicGradientPicker individually.
What styling customization options are available?
You can customize the tool using multiple CSS variables prefixed with --gp-, including container styles (--gp-container-width, --gp-container-shape, --gp-container-background-color), input styles (--gp-input-height, --gp-input-shape), and radio button properties.
Where can I test the tool before installing it?
You can test the tool directly using the online playground at https://acrodata.github.io/gradient-picker/.