Sunset CSS Gradient — Ready-Made Code
Build CSS gradients visually: linear, radial or conic type, angle slider and up to six color stops with a live full-width preview and copyable code.
Processed entirely in your browser — nothing you enter here is ever uploaded.
Result
About this tool
This page opens the gradient generator with a ready-made sunset fade loaded: warm coral #ff7e5f flowing into soft peach #feb47b, left to right. The preview shows it full-width immediately, and the CSS line below is ready to copy as-is.
Warm coral-to-peach fades are a hero-section staple because they read as friendly and energetic without overpowering white text. This pair sits close enough in hue that the midpoint stays clean — no muddy gray band in the middle, the usual failure mode of gradients between distant colors.
Use it unchanged, or make it yours: rotate the angle for a diagonal sunset, pull the first stop inward for a stronger coral presence, or add a third stop with a deep plum near 100% for a dusk feel. Every change updates the copyable CSS instantly.
Example. A linear gradient at 90 degrees from #2563eb at 0% to a second stop copies linear-gradient(90deg, #2563eb 0%, ...).
Limit. There are at most six color stops, and the angle slider runs from 0 to 360 degrees.