Gradient palettes

Thirty hand-picked colour gradients, each tuned so the blend stays clean from end to end. Copy the CSS, or open any of them in the editor to make it your own.

  • Press Magenta

    #ff2d87 → #ffb800

  • Harbour Dawn

    #fbd3e9 → #bbd2f7 → #8ec5fc

  • Terracotta Roof

    #c2563a → #e9a66b → #f6dcb3

  • Glacier Melt

    #e0f7ff → #7fd3f7 → #1f7fbf

  • Night Tram

    #0f0c29 → #302b63 → #6a3fa0

  • Citrus Peel

    #ffe259 → #ffa751

  • Kelp Forest

    #0b3d3a → #1d7a6b → #7ed6b3

  • Risograph

    #0078bf → #ff48b0 → #ffe800

  • Oat Milk

    #fff6ec → #f1dcc4

  • Ember

    #3b0a0a → #b3261e → #ff8a3d

  • Lilac Hour

    #e9d5ff → #c4b5fd → #f0abfc

  • Moss & Stone

    #5b6b3a → #9aa57a → #d7d3c1

  • Aurora

    #00c9a7 → #3ea8ff → #8b5cf6

  • Ink Wash

    #1a1a1d → #3a3a44 → #6b6b78

  • Guava

    #ff9a8b → #ff6a88 → #ff99ac

  • Electric Lime

    #d4fc79 → #96e6a1

  • Desert Highway

    #2b1b3d → #a5476b → #f4a261 → #ffd7a0

  • Blueprint

    #0a2a66 → #1f4fbf → #5b8def

  • Peach Fuzz

    #ffd1b3 → #ffb38a

  • Deep Sea

    #000428 → #004e92

  • Clay Pot

    #8a4b2a → #c98755

  • Candy Stripe

    #ff3cac → #784ba0 → #2b86c5

  • Sea Glass

    #d9f4ec → #a8e6cf → #7fcdbb

  • Volcanic

    #1b1b1b → #5c1a1a → #e2562b

  • Wheat Field

    #f7e6a6 → #d9b44a → #8f6b1f

  • Ultraviolet

    #5f0a87 → #a4508b

  • Mint Chip

    #c3f0e0 → #5ec4a8 → #2a5d51

  • Rose Quartz

    #f7cac9 → #f3e0ec → #92a8d1

  • Midnight Oil

    #141e30 → #243b55

  • Saffron

    #f9d423 → #ff4e50

Questions

Can I use these gradients for free?

Yes. Colour combinations are not copyrightable; copy the CSS into any personal or commercial project.

Why do some gradients look smoother here than elsewhere?

They are blended in OKLCH, a perceptual colour space, so there is no grey band in the middle. The copied CSS includes a fallback line for older browsers.

How do I change a palette?

Press “Edit” to open it in the gradient generator, where you can move stops, change the angle or type, check text contrast and export to CSS, Tailwind, SVG or PNG.