https://github.com/jenstornell/gradient-designer

https://github.com/jenstornell/gradient-designer

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/jenstornell/gradient-designer
• Owner: jenstornell
• Created: 2020-08-19T05:23:44.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2021-01-01T15:09:44.000Z (almost 4 years ago)
• Last Synced: 2024-04-03T15:32:53.181Z (7 months ago)
• Language: Vue
• Size: 1.71 MB
• Stars: 60
• Watchers: 3
• Forks: 3
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# Gradient Designer

**Version 2.2** - [Changelog](CHANGELOG.md)

**[Old version 1 - For Tailwind 1](https://gradient-designer.csspost.com/v1.0/)**

[![Screenshot](screenshot.png)](https://gradient-designer.csspost.com/)

**Visit [Gradient Designer](https://gradient-designer.csspost.com/).**

## In short

- Design gradients and store them locally (local storage)

- Uses the colors and shades from TailwindCSS 2

- Export the code as TailwindCSS classes or native CSS

- 26 colors and 220 shades to choose from

- Maximal use of screen space

## Usage

### Gradient - Add

Add a gradient with the plus sign at the top. When you have added the gradient, click on it to select it.

### Gradient - Colors

When you have a gradient selected, you will see three tabs.

The first color is the "from" color. It's required in order for the gradient to work. The middle color is called "via" and the last is called "to".

There is also a "active" switch to toggle the color on or off. Make sure that at least the "from" color is active.

### Gradient - Shades

For most of the colors there are also 10 different shades. Transparent, current, black and white does not have any shades.

### Gradient - Preview

There is a big preview area showing the gradient. Below it are preview boxes to show how the gradient work as a button and which individual colors are used.

### Gradient - Directions

You can change the gradient direction by using the arrows placed on the gradient preview.

### Gradient - Delete

You can delete the gradient by using the trash icon placed on the gradient preview.

### Gradient - Code

When you are satisfied with your gradient, you can get the code for it.

You can get the code as Tailwind classes or as native CSS.

If you use Tailwind and need it with pseudo classes, you can use the prefix feature.

### Gradient - Info

If you want, you can give the gradient a name. You can do that by clicking the info icon on the gradient preview.

## Report issues

Please report any issues you encounter.

## Donate

Donate to [DevoneraAB](https://www.paypal.me/DevoneraAB) to support my work.

## License

The tool is free to use