Steel Linear
Steel Linear is a cool steel interface tone gradient built with linear CSS syntax.
slatebluedark
Back to generator
Steel Diagonal Gradient CSS
Steel Diagonal is a cool steel interface tone gradient built with linear CSS syntax.
background
Gradient Field
Output
Copy-ready CSS
Pure CSS
background: linear-gradient(45deg, #38bdf8 0%, #0f172a 50%, #64748b 100%);Tailwind v4
bg-[linear-gradient(45deg\,_#38bdf8_0%\,_#0f172a_50%\,_#64748b_100%)]When to use it
Steel Diagonal is a slate linear gradient preset for backgrounds, buttons, hero panels, cards, and visual accents. It uses 3 color stops (#38bdf8, #0f172a, #64748b) to create a repeatable CSS background without image assets. Steel Diagonal is a cool steel interface tone gradient built with linear CSS syntax. The preset is intentionally stored as a complete background declaration, which makes it easy to paste into a stylesheet, component style, or Tailwind arbitrary value. Use it when a flat fill needs more movement, or when you want a strong color system for a section. Open the generator to switch between linear, radial, and conic modes, adjust angle or center position, and move individual stops until the transition fits your layout.
Explore more
More CSS Forge paths
Related
Similar gradients
These presets share color and mode tags with Steel Diagonal.
Midnight Diagonal
Midnight Diagonal is a midnight blue drama gradient built with linear CSS syntax.
darkblueviolet
Ocean Diagonal
Ocean Diagonal is a deep ocean color flow gradient built with linear CSS syntax.
bluetealdeep
Ice Diagonal
Ice Diagonal is a clean icy brightness gradient built with linear CSS syntax.
lightbluecool
Royal Diagonal
Royal Diagonal is a royal violet depth gradient built with linear CSS syntax.
indigovioletdark