Build visually and get ready-to-copy CSS code
Build gradients and shadows visually with sliders, see the results in real time, and copy the ready CSS code. For a gradient, pick two colors and an angle between 0 and 360 degrees to generate a linear-gradient code. For a shadow, adjust the downward distance, blur, spread, intensity, color, and corner rounding, then preview it on a sample card. Four presets for subtle, normal, bold, and floating give you a good starting point, and copying the shadow also includes the border-radius. This is useful for buttons, cards, hero sections, and explaining exactly what look you want to an AI tool.
In the background of a hero section, on important buttons, or on a highlighted card. Do not use it everywhere on the site because it tires the eye.
The intensity is probably too high. A good shadow is one you barely notice. Try an intensity of 10 to 20 percent, or use one of the ready presets.
Not in this tool, which only has a start and end color. You can manually add a middle color in the code between the two colors inside the linear-gradient.
The horizontal offset is fixed at 0, so the shadow falls straight down like overhead lighting. This is the standard look for user interfaces.
A negative spread shrinks the shadow before blurring it, so it only peeks out from under the card instead of all sides. Three of the four presets use this.
Klix could not load
Try reloading the page first. If a new version just went out, a reload fixes it straight away.
If reloading did not help, your browser may be too old. Klix runs the tools on your own device rather than on a server, so it needs a browser from 2022 or later. What to do: update Chrome or Firefox, then open klixtools.com again.