Brown gradient

Brown is a dark, low-chroma orange. Brown gradients look like wood, leather, coffee and chocolate, and read as warm, natural and crafted. Below are 12 brown gradients — copy the CSS, download a PNG, or open one in the editor.

Quick copy — brown classic:

background: linear-gradient(135deg, #9a633b 0%, #945e39 8.3%, #8e5a36 16.7%, #885534 25%, #825132 33.3%, #7c4d30 41.7%, #76482d 50%, #71442b 58.3%, #6b4029 66.7%, #653c26 75%, #5f3824 83.3%, #5a3421 91.7%, #54301f 100%); background: linear-gradient(in oklch 135deg, #9a633b 0%, #54301f 100%);
  • Aa · 5.0:1

    White text: Passes AA

    Brown classic

    #9a633b → #54301f
  • Aa · 4.0:1

    White text: Fails AA — large text only (3:1)

    Brown coffee

    #9f7655 → #3a221a
  • Aa · 8.7:1

    White text: Passes AA

    Brown chocolate

    #6d3f2f → #321a16
  • Aa · 3.3:1

    Black text: Fails AA — large text only (3:1)

    Brown caramel

    #d7a365 → #94582a
  • Aa · 6.2:1

    White text: Passes AA

    Brown leather

    #914f2f → #602b1e
  • Aa · 4.4:1

    White text: Fails AA — large text only (3:1)

    Brown wood

    #946640 → #744931 → #9d6f47
  • Aa · 2.6:1

    White text: Fails AA — no plain text

    Brown to amber

    #5d3827 → #df911a
  • Aa · 5.7:1

    Black text: Passes AA

    Brown tan

    #e1caaa → #ad8761
  • Aa · 4.3:1

    White text: Fails AA — large text only (3:1)

    Brown mocha

    #8f7465 → #56423c
  • Aa · 3.0:1

    White text: Fails AA — no plain text

    Brown glow

    #c7894a → #43251a
  • Aa · 2.4:1

    Black text: Fails AA — no plain text

    Brown autumn

    #7f422d → #c06325 → #dea143
  • Aa · 6.7:1

    White text: Passes AA

    Brown to black

    #7e5239 → #190f0b

Using brown gradients well

Good for: coffee, bakery and food brands, outdoor and leather goods, earthy and autumn themes, vintage looks.

Pairing: Brown pairs with off-white, sage green, deep teal or burnt orange. Brown → amber stays warm and clean; brown → grey tends to look dull.

Readable text: Most browns are dark enough for white text at 4.5:1 or more. Light tans and caramel tones need dark text. The ratio on each swatch is the worst point across the gradient (WCAG 2: 4.5:1 for body text, 3:1 for large text). Check custom pairs in the contrast checker.

These gradients are blended in OKLCH so the middle stays clean; the copied CSS includes a pre-blended fallback line for older browsers.

Questions

What is the CSS code for a brown gradient?

A simple brown gradient is background: linear-gradient(in oklch 135deg, #9a633b 0%, #54301f 100%); Copy any gradient on this page for ready CSS, including a fallback for older browsers.

What colours go well with brown in a gradient?

Brown pairs with off-white, sage green, deep teal or burnt orange. Brown → amber stays warm and clean; brown → grey tends to look dull.

What text colour is readable on a brown gradient?

Most browns are dark enough for white text at 4.5:1 or more. Light tans and caramel tones need dark text. Each swatch on this page shows the better of black or white text, its worst-case WCAG contrast ratio, and whether it passes AA (4.5:1), is only good for large text (3:1), or fails — for failing swatches, add a darker scrim behind the text or pick a deeper variant.

How do I download a brown gradient image?

Press “PNG” under any gradient to download a 1600×900 image, rendered in your browser. Open it in the editor to change size-independent details first, such as angle or colours.

Where are brown gradients typically used?

Common uses: coffee, bakery and food brands, outdoor and leather goods, earthy and autumn themes, vintage looks.

More colour gradients