CSS Gradient Generator

Metallic silver and steel gradients for backgrounds, buttons and headings. Like gold, silver only looks metallic when it moves between a darker grey and a bright highlight; steel adds a cool blue tint. Hover a gradient to see its colors, or click it to open it in the generator and customize it.

Silver Gradients

Steel Gradients

FAQ

How do I make a silver gradient in CSS?

Use three to five stops of neutral grey, going from a mid grey to an almost white highlight and back, for example linear-gradient(135deg, #919497 0%, #EBECED 25%, #BDBEC0 50%, #E6E7E8 75%, #83868A 100%). Without the bright highlight, silver just reads as flat grey.

What is the difference between silver and steel gradients?

Silver is almost colorless; steel has a slight cool blue tint and usually darker tones, which makes it look heavier and more industrial.