🎨 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

• CSS
• SVG
• Python Matplotlib
• FastLED
• Android (Vector drawable)
• QML (QtQuick)
• Photoshop
• GIMP

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:

• 0 is a solid black (normlized form 000000)
• FF0000-FF00-FF is a uniform red-green-blue gradient (normalized form FF0000-00FF00-0000FF)
• stripes=33.33:FF0000-33.33:FF00-66.67:FF00-66.67:FF is a red-green-blue stipe gradient named stripes (normalized form stripes=33.3:FF0000-33.3:00FF00-66.7:00FF00-66.7:0000FF)
• 0-10:FFFFFF-30:0-60:FFFFFF-0 is a black-white alternating gradient with increasing width (normalized form 0:000000-10:FFFFFF-30:000000-60:FFFFFF-100:000000)
• default=0:093391-33:019C5C-56:ABCD39-64:BFD336-77:B7D135-100:84CE34 is a gradient named default (this is already in normalized form)