Skip to main content
KioTools
  • +100 Tools
  • 100% Free
  • 0 Pop-up Ads
  • No Sign-up
  • Runs locally

Related Tools

Color Contrast Checker (WCAG)

Contrast ratio for two colors with AA/AAA pass or fail.

Color Palette Extractor

Pull dominant, vibrant and muted colors from an image.

CSS Glassmorphism Generator

Design frosted-glass UI cards with CSS or Tailwind output.

Sunset Gradient CSS

About this option

A sunset gradient fades from orange into hot pink, the warm palette of dusk. This page opens the gradient generator on exactly that blend at 120°, so you can copy the CSS immediately or nudge the colours and angle to match your design.

When to use it

  • Hero sections and buttons that should feel warm and energetic
  • Social-media banners and posters with a dusk atmosphere
  • A background for a card, badge or call-to-action

How to use it

  1. 1Open the page — the sunset gradient is already loaded in the preview
  2. 2Change the colours or drag the stops to adjust how far each colour reaches
  3. 3Click Copy and paste the CSS into your stylesheet's background property

Frequently asked questions

Which colours make a sunset gradient?

This one runs from orange (#f97316) to pink (#ec4899). Adding a third stop of yellow at the start makes it even more like a real sky.

How do I use the CSS?

Paste it as the value of `background` or `background-image` on any element, for example `background: linear-gradient(120deg, #f97316 0%, #ec4899 100%);`.

Can I turn it into text colour?

Yes. Apply it as a background with `background-clip: text` and a transparent text colour.

More options