Sass fade-out() Function

What You’ll Learn

fade-out() is a global Sass helper documented in the sass:color module page (Deprecated Functions). It makes a legacy color more transparent by decreasing alpha by $amount at compile time. This page covers the fixed-amount trap, the transparentize alias, why the module system skipped it, how it differs from color.scale(), migration to color.adjust(), and five compiled examples.

What Is fade-out()?

Fade-out means “make this color more see-through.” Official docs: it decreases the alpha channel of $color by $amount (0–1). RGB (or HSL) stays the same; only transparency moves toward clear by a fixed chunk. It is the same helper as transparentize().

• fade-out(rgba(#e1d7d2, 0.5), 0.4) → rgba(225, 215, 210, 0.1)
• transparentize(rgba(#6b717f, 0.5), 0.2) → rgba(107, 113, 127, 0.3)
• fade-out(rgba(#036, 0.3), 0.3) → rgba(0, 51, 102, 0) (fully transparent)

📝 Syntax

Call the global function (or its alias) with a legacy color and an alpha step:

// Deprecated globals (legacy colors only) — aliases
fade-out($color, $amount)
transparentize($color, $amount)

// Preferred — relative transparency
@use "sass:color";
color.scale($color, $alpha: -$percent)

// Same fixed math as fade-out
color.adjust($color, $alpha: -$amount)

Parameters

Return value

📦 Why There Is No color.fade-out()

Official docs: because fade-out() / transparentize() is usually not the best way to make a color more transparent, it is not included in the new module system. You will not find color.fade-out or color.transparentize after @use "sass:color".

// Old (deprecated globals — same result)
$wash: fade-out(rgba(#e1d7d2, 0.5), 0.4);
$wash: transparentize(rgba(#e1d7d2, 0.5), 0.4);

@use "sass:color";

// Same fixed subtraction as fade-out
$wash: color.adjust(rgba(#e1d7d2, 0.5), $alpha: -0.4);

// Usually better — 40% more transparent relative to the original
$wash: color.scale(rgba(#e1d7d2, 0.5), $alpha: -40%);

📋 fade-out vs color.scale vs color.adjust

Official docs call out this trap with rgba(#036, 0.3) (already mostly transparent):

🛠 Compatibility

This is about Sass compilers, not browsers. Compiled CSS receives a finished color—no fade-out() call remains at runtime.

Examples Gallery

Examples lead with fade-out(), show the transparentize() alias, then modern scale / adjust migrations. Open View Compiled CSS for verified output (matches official Sass docs samples).

@debug fade-out(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.1)

.card {
  background: rgba(#e1d7d2, 0.5);
  &.ghost {
    background: fade-out(rgba(#e1d7d2, 0.5), 0.4);
  }
}

.card {
  background: rgba(225, 215, 210, 0.5);
}
.card.ghost {
  background: rgba(225, 215, 210, 0.1);
}

@debug transparentize(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.3)

.overlay {
  --wash: #{rgba(#6b717f, 0.5)};
  --ghost: #{transparentize(rgba(#6b717f, 0.5), 0.2)};
}

.overlay {
  --wash: rgba(107, 113, 127, 0.5);
  --ghost: rgba(107, 113, 127, 0.3);
}

// rgba(#036, 0.3) has alpha 0.3, so when fade-out() subtracts 0.3 it
// returns a fully transparent color.
@debug fade-out(rgba(#036, 0.3), 0.3); // rgba(0, 51, 102, 0)

.deep {
  color: fade-out(rgba(#036, 0.3), 0.3);
}

.deep {
  color: rgba(0, 51, 102, 0);
}

@use "sass:color";

// scale() instead makes it 30% more transparent than it was originally.
@debug color.scale(rgba(#036, 0.3), $alpha: -30%); // rgba(0, 51, 102, 0.21)

.deep {
  --fade-out: #{fade-out(rgba(#036, 0.3), 0.3)};
  --scale: #{color.scale(rgba(#036, 0.3), $alpha: -30%)};
}

.deep {
  --fade-out: rgba(0, 51, 102, 0);
  --scale: rgba(0, 51, 102, 0.21);
}

@use "sass:color";

// Prefer on Dart Sass 1.79+:
// color.adjust($c, $alpha: -0.4, $space: hsl)

.tokens {
  --legacy: #{fade-out(rgba(#e1d7d2, 0.5), 0.4)};
  --adjust: #{color.adjust(rgba(#e1d7d2, 0.5), $alpha: -0.4)};
  --brand: #{fade-out(rgba(#336699, 0.8), 0.3)};
}

.tokens {
  --legacy: rgba(225, 215, 210, 0.1);
  --adjust: rgba(225, 215, 210, 0.1);
  --brand: rgba(51, 102, 153, 0.5);
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize fade-out() / transparentize() in older overlays.
• Safe migrations — swap to color.adjust for identical output, or scale for better UX.
• Teaching alpha — show fixed alpha steps vs relative scaling.
• Audit traps — find fade-out on already-faint washes that snap to invisible.
• Pairing with fade-in — both globals are deprecated twins; migrate together.

⚠️ Common Pitfalls

• Using it in new code — prefer color.scale (or adjust for same math).
• Expecting color.fade-out() — that name does not exist in sass:color.
• Low alpha + large amounts — easy to clamp to fully transparent unexpectedly.
• Modern color spaces — $color must be legacy for global fade-out.
• Confusing with color.opacity() — that helper reads alpha; fade-out writes a new color.

💡 Best Practices