CSS Gradient Generator
With our CSS Gradient Generator tool, you can easily create beautiful gradients. For your website, you may alter the colors, angles, and transitions to create a custom backdrop. Increase interaction and visual appeal with striking gradients customized for your company.
Stack
Colors
Presets
Welcome
Thanks for using Kalimah 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.
How to use:
Using the generator should be straight forward. I will, however, provide some details in this section for competence of the project.
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 as there is no point in using them.
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 also modify the alpha channel of the color if you wish.
The color box is designed similar to Chrome developer tools color picker. So if you are familiar with that picker it should be similar to this one.
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.