←

CSS Gradient & Shadow Generator

See it live, copy the code
0%
100%
background: linear-gradient(135deg, #f4a261 0%, #e76f51 100%);
More info

Gradients

Choose linear (a blend along a line, set by the angle), radial (a blend outward from the center) or conic (colors sweeping round a point, like a pie chart). Each color has a position from 0 to 100 percent; add up to six colors and drag their positions to move the blend. Press Copy CSS and paste the background line into your stylesheet.

Box shadows

A shadow has a horizontal and vertical offset, a blur (softness), a spread (growing or shrinking the shadow), a color with opacity, and can be inset (drawn inside the box). Real-looking shadows are usually soft, low in opacity and layered: try a small tight shadow plus a large faint one. Add up to four layers and the code lists them in order.

Questions

Will it work in every browser? Linear and radial gradients and box shadows work everywhere. Conic gradients work in all current browsers. Is the output free to use? Yes, it is just CSS. Is anything saved? Your last settings stay in this browser, nothing is uploaded. To pick colors from a picture or build a palette, see the Color Picker and the Palette Generator.