Aurora Linear Gradient CSS

Aurora Linear is a cool aurora color movement gradient built with linear CSS syntax.

background

Gradient Field

Output

Copy-ready CSS

Pure CSS

background: linear-gradient(135deg, #22d3ee 0%, #8b5cf6 50%, #f472b6 100%);

Tailwind v4

bg-[linear-gradient(135deg\,_#22d3ee_0%\,_#8b5cf6_50%\,_#f472b6_100%)]

Try it in the generator

When to use it

Aurora Linear is a cool linear gradient preset for backgrounds, buttons, hero panels, cards, and visual accents. It uses 3 color stops (#22d3ee, #8b5cf6, #f472b6) to create a repeatable CSS background without image assets. Aurora Linear is a cool aurora color movement 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