Coral Linear Gradient CSS
Coral Linear is a warm coral brightness gradient built with linear CSS syntax.
background
Gradient Field
Output
Copy-ready CSS
Pure CSS
background: linear-gradient(135deg, #fb7185 0%, #f97316 50%, #facc15 100%);Tailwind v4
bg-[linear-gradient(135deg\,_#fb7185_0%\,_#f97316_50%\,_#facc15_100%)]When to use it
Coral Linear is a warm linear gradient preset for backgrounds, buttons, hero panels, cards, and visual accents. It uses 3 color stops (#fb7185, #f97316, #facc15) to create a repeatable CSS background without image assets. Coral Linear is a warm coral brightness 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 Coral Linear.
Coral Diagonal
Coral Diagonal is a warm coral brightness gradient built with linear CSS syntax.
Sunrise Linear
Sunrise Linear is a early sunrise softness gradient built with linear CSS syntax.
Sunrise Diagonal
Sunrise Diagonal is a early sunrise softness gradient built with linear CSS syntax.
Sunset Linear
Sunset Linear is a warm sunset contrast gradient built with linear CSS syntax.
Sunset Diagonal
Sunset Diagonal is a warm sunset contrast gradient built with linear CSS syntax.