Kalimah Tools

Appearance

Gradient Generator ​

There are many gradient generators available online but I tried to make this generator as comprehensive and as easy to use as possible.

You can customize all aspects of gradients including stacking multiple gradients, creating linear and radial gradients, applying repeat gradients as well as many other features.

Sections ​

Stack ​

You can add a new gradient layer by clicking on the add button below the gradient stack. Each layer has a show/hide and delete buttons. Those buttons appears when you hover the layer or select it. If there is only one layer in the stack the buttons will not show.

Color options ​

In this section all main options can be configured. Gradient type (linear, radial), repeat, gradient shape (circle, ellipse) for radial gradients and also height, width and position of the gradient.

Colors ​

To change color of any of the stops select the stop first then modify the color using this section. You can either select a color from the color box or insert the hex color in the input provided.

You can change the stop value by dragging the pin on the gradient bar or set the value directly by clicking on the value above the pin.

Presets ​

There are two main usage for this section. Either save (or apply) the presets that you generated or select on the presets available.

There are more 500 gradient preset that you can view by clicking on "more presets" button below the presets section.

Once displayed, to hide the presets section you can either scroll down with the mouse wheel or click anywhere on the gradient display.

Usage ​

  • All number inputs can be adjusted by using the up and down arrow keys.
  • In addition to click and drag, range inputs and knobs can be adjusted by mouse wheel for fine tuning.
  • When a stop is selected, you can either use the delete key to remove it or drag it out of the gradient bar.
  • You can scroll down outside the container to show only the gradient bar. You can scroll up to show the whole container again.
  • Full preset view can be hidden by either scrolling down or clicking the ESC key.

Credits ​

Go to Gradient Generator