Sunrise

A vibrant blend of Outrageous Orange and Carrot Orange, reminiscent of a stunning sunrise.

  • 🎨 Use this gradient for a warm, energizing design.
  • 💡 This gradient is inspired by the colors of a sunrise, symbolizing new beginnings and hope.
Outrageous Orange

#ff512f

Carrot Orange

#f09819

CSS Linear Gradient Code

				
					/* Sunrise CSS Linear Gradient Background */
.gradient {
  background: #FF512F;
  background: linear-gradient(
    to right,
    #FF512F,#F09819
  );
}
				
			

TailwindCSS Linear Gradient

				
					/* Sunrise TailwindCSS Linear Gradient */
<div class="bg-gradient-to-r from-[#FF512F] to-[#F09819]"></div>
				
			

Sunrise - UI Design Examples

You can use this gradient in your UI design in many ways, for example as a background in a tweet, for buttons or as a text gradient.

Tweet Background Generator

Martha Samuel

@marthatalks

I love this Sunrise color palette gradient background 👍
July 7, 2025 07:02

CSS Linear Gradient Button

Home
Why Sunrise?
Get Started

Linear Gradient Border

Sunrise

CSS Font Gradient

The Best

Sunrise

Tailwind CSS

Landing Pages

Shade of Sunrise
We hope you enjoyed Sunrise. Keep reading for more amazing colorful content for developers, designers and creators!
Sunrise
Outrageous Orange
Carrot Orange