# Infinite Gradients

An HTML experiment built on React for generating randomly created CSS3 gradients (both linear and radial).

Infinite Gradients comes in 3 forms ( a website, a command line utility, and a node.js library ).

## Website

The website is built on React, and allows you to pause and start an infinite stream of gradients. You can toggle features on and off by clicking on items in the header. You can lock features such as:

**linear gradients**: angle, speed, offset, colors 1-4**radial gradients**: position X & Y, speed, offset, colors 1-4

You can toggle the random generation on and off by clicking either the mouse button, or by hitting your spacebar.

### Website Keyboard Controls

Feature | Toggle Key | Description |
---|---|---|

Status | Space Bar | Pauses all features so you can look at the gradient |

Type | T | Toggles between ‘linear’ and ‘radial’ gradients |

Offset | O | Moves the offset of the gradient |

Speed | S or 0-9 | Determines how fast the offset changes |

Angle | A | Determines the angle (in degrees) of the linear gradient |

X Position | X | Determines the x-origin of the radial gradient |

Y Position | Y | Determines the y-origin of the radial gradient |

Color 1 | V | Locks/Unlocks Color 1 from being randomly generated |

Color 2 | B | Locks/Unlocks Color 1 from being randomly generated |

Color 3 | N | Locks/Unlocks Color 1 from being randomly generated |

Color 4 | M | Locks/Unlocks Color 1 from being randomly generated |

Randomize | R | Randomizes the current settings |

## Command Line Utility

Infinite Gradients is available as a command line tool that outputs random (or specific) CSS gradient functions. You can install it by running:

After installation, you will have a global executable called `infinite-gradients`

.

### Help

To print help information, run: `infinite-gradients --help`

### Example

Generate a random gradient:

Do it again and it’s different:

Now you can make sure that it’s a linear gradient:

Now you can specify the colors and angle:

## Node JS Library

You can use the infinite-gradients functions within node by running:

and including the library in your code:

The Infinite Gradients library contains a few functions for generating gradients, and a few helper functions that may or may not be useful to you.

The **API** is described below:

### infiniteGradients.toDegrees(radians)

Converts from radians to degrees

**Parameters**

**radians**: , the value in radians

**Returns**: , the value in degrees

**Example**:

### infiniteGradients.getAngle(x1, y1, x2, y2)

Get the angle between 2 points with x/y coordinates

**Parameters**

**x1**: , the x coordinate of point 1

**y1**: , the y coordinate of point 1

**x2**: , the x coordinate of point 2

**y2**: , the y coordinate of point 2

**Returns**: , the angle in degrees

**Example**:

### infiniteGradients.getDistance(x1, y1, x2, y2)

Get the distance between 2 points with x/y coordinates

**Parameters**

**x1**: , the x coordinate of point 1

**y1**: , the y coordinate of point 1

**x2**: , the x coordinate of point 2

**y2**: , the y coordinate of point 2

**Returns**: , the distance between the 2 points

**Example**:

### infiniteGradients.toHex(num)

Convert a decimal to hexidecimal format. pads to at least 2 digits.

**Parameters**

**num**: , The number in decimal format

**Returns**: , the number converted to hexidecimal format

**Example**:

### infiniteGradients.floatBetween(min, max)

Returns a random float between min (inclusive) and max (exclusive)

**Parameters**

**min**: , the minimum number (inclusive)

**max**: , the maximum number (exclusive)

**Returns**: , a random float between min and max

**Example**:

### infiniteGradients.intBetween(min, max)

Returns a random integer between min (inclusive) and max (inclusive)

**Parameters**

**min**: , the minimum number (inclusive)

**max**: , the maximum number (inclusive)

**Returns**: , a random integer between min and max

**Example**:

### infiniteGradients.randomColor()

Return a random RGB color in hex format

**Returns**: , a random RGB color in hex string format

**Example**:

### infiniteGradients.getRadialGradient(colors, offset, x, y)

Gets a radial gradient CSS function as a string

**Parameters**

**colors**: , Gets a radial gradient CSS function as a string

**offset**: , Gets a radial gradient CSS function as a string

**x**: , Gets a radial gradient CSS function as a string

**y**: , Gets a radial gradient CSS function as a string

**Returns**: , a radial gradient CSS function as a string

**Example**:

### infiniteGradients.getLinearGradient(colors, offset, angle)

Gets a linear gradient CSS function as a string

**Parameters**

**colors**: , Gets a linear gradient CSS function as a string

**offset**: , Gets a linear gradient CSS function as a string

**angle**: , Gets a linear gradient CSS function as a string

**Returns**: , a linear gradient CSS function as a string

**Example**:

## Source Code

## For Developers

### Clone the Project

### Install the Dependencies

### Run the Application (and watch for changes)

Now browse to the app at http://localhost:8080/infinite-gradients

## Other Background Generators

- Unique Gradient Generator
- Randomized Gradient Generator
- Colorzilla Gradient Editor
- AngryTools.com Gradient Editor
- CSS Gradient Generator

**…more to come. please submit a PR if you know what’s missing**

## License

Copyright (c) 2015 skratchdot

Licensed under the MIT license.