CSS Gradient & Box Shadow Generator

Build CSS gradients and box shadows with sliders and color pickers, see them update live, and copy the CSS — or a ready-made Tailwind arbitrary-value class.

Type

Angle135°

Color stops

100%

CSS

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Tailwind arbitrary value

bg-[linear-gradient(135deg,#6366f1_0%,#ec4899_100%)]

Design gradients and shadows visually

Gradients and shadows give interfaces depth, but writing them by hand means a lot of trial and error with angles, color stops, offsets and blur values. This generator gives you sliders and color pickers with a live preview, then writes the CSS for you — plus a Tailwind arbitrary-value class if your project uses Tailwind CSS.

How to create a gradient

Choose the Gradient tab and start from a preset, or keep the default.
Pick a type: linear, radial or conic.
Set the angle for linear and conic gradients.
Change each color stop’s color and position; add up to eight stops or remove extras.
Copy the CSS background declaration or the Tailwind bg-[…] class.

How to create a box shadow

Switch to the Box shadow tab and try a preset such as Soft, Large, Glow or Inset.
Adjust each layer’s X and Y offset, blur, spread, color and opacity.
Tick Inset for an inner shadow, and add up to five layers.
Change the preview box color and corner radius to match your design, then copy the result.

Gradient types explained

Linear gradients blend along a line. 90° runs left to right, 180° top to bottom, and 135° diagonally.
Radial gradients spread outward from the center, useful for glows and spotlights.
Conic gradients rotate around the center, like a color wheel — handy for pie charts and loaders.

Stop positions control where each color is at full strength. Two stops at the same position create a hard edge instead of a blend, which is how stripes and progress bars are made.

Making shadows look natural

A box-shadow is written as x-offset y-offset blur spread color. Realistic shadows usually have a small positive Y offset (light from above), a blur larger than the offset, a slightly negative spread so they stay under the element, and low opacity — around 5–15% black. Layering two shadows, a tight darker one and a wide soft one, mimics how real objects cast light and is the approach used by most design systems.

Using the Tailwind output

Tailwind lets you use any CSS value in square brackets. Because class names can’t contain spaces, spaces are replaced with underscores, for example shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1)]. Paste the class straight into your markup, or copy the CSS value into your Tailwind theme if you’ll reuse it often.

Need a full brand palette for your gradients? Generate one with the Tailwind Color Shades Generator, convert colors between formats with the Color Converter, and make type scale smoothly with the CSS Clamp() Generator.

Frequently asked questions

What's the difference between linear, radial and conic gradients?

Linear gradients change color along a straight line at an angle. Radial gradients spread out from a center point in a circle or ellipse. Conic gradients sweep around a center point like a color wheel or pie chart.

How do I use the Tailwind class?

Tailwind supports arbitrary values in square brackets, like bg-[linear-gradient(...)] or shadow-[0_4px_6px_rgba(0,0,0,0.1)]. Spaces must be written as underscores, which the generator does for you.

Why use several shadow layers?

Real shadows have a soft, wide spread and a tighter, darker area close to the object. Stacking two or three low-opacity layers looks far more natural than one heavy shadow.

What does 'spread' do in box-shadow?

Spread grows or shrinks the shadow before it's blurred. A negative spread keeps the shadow tucked under the element, which is how many soft UI shadows avoid looking muddy at the edges.

Do gradients hurt performance?

No, CSS gradients are drawn by the browser and are usually lighter than image files. Very large animated shadows can be costly on low-end devices, so avoid animating box-shadow directly.