CSS Gradient and Shadow Generator

Linear and radial, each with an optional repeating variant. Linear gradients take an angle in degrees; radial gradients take a circle or ellipse shape.

Up to eight. Stops are sorted by position before the CSS is written, because a stop placed before the previous one gets clamped by the browser and quietly changes the result.

Yes, up to four layers. They are joined with commas in the order you add them, and each layer can be inset independently.

CSS rejects a negative blur radius, so the generator clamps it to zero. Offsets and spread can be negative and are passed through as typed.

A full declaration — `background-image: ...;` for gradients and `box-shadow: ...;` for shadows — ready to paste into a stylesheet.