Skip to content
/ gradient Public

Simple web based color gradient designer. Generates code to copy & paste into your project or download as file.

License

Notifications You must be signed in to change notification settings

eltos/gradient

Repository files navigation

🎨 Color gradient designer

A simple javascript based color gradient designer for your browser. Help's you create awesome gradients and generates the appropriate code for usage in your project via copy & paste or file download. You can share the gradients as URL and save your favourites in a personal gallery.

https://eltos.github.io/gradient

Supports code and file generation for

Feel free to open an issue or submit a merge request to support additional formats.

🪙 DONATE ❤️ SAY THANKS

Documentation

Gradient hash format

This section describes the encoding of gradients as used for the designer in the URL hash.

It has the form [name=][pos:]RRGGBB{-[pos:]RRGGBB}

The optional name in the form name= is followed by a list of nodes (at least one) separated by dashes -. The name is an arbitrary string which may not contain an equals character =. Each node is described by an optional position and mandatory color in the form pos:RRGGBB or RRGGBB. The position percentage pos is a floating point number between 0.0 and 100.0. The color RRGGBB is the hex color code where leading zeros may be omnitted. Nodes with an explicit position are not required to be in correct order, but if multiple nodes have equal positions their order matters. If one or multiple positions are omnitted, the affected nodes are equally distributed in the gap.

The normalized form (as generated by the program) states positions with one digit precision for either all or none of the nodes, ensures their correct order and outputs hex color codes with six characters.

Examples:

About

Simple web based color gradient designer. Generates code to copy & paste into your project or download as file.

Topics

Resources

License

Stars

Watchers

Forks