Sass fade-in() Function

What You’ll Learn

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

What Is fade-in()?

Fade-in means “make this color less see-through.” Official docs: it increases the alpha channel of $color by $amount (0–1). RGB (or HSL) stays the same; only transparency moves toward solid by a fixed chunk.

• fade-in(rgba(#e1d7d2, 0.5), 0.4) → rgba(225, 215, 210, 0.9)
• opacify(rgba(#6b717f, 0.5), 0.2) → rgba(107, 113, 127, 0.7)
• fade-in(rgba(#036, 0.7), 0.3) → #036 (fully opaque)

📝 Syntax

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

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

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

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

Parameters

Return value

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

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

// Old (deprecated globals — same result)
$fill: fade-in(rgba(#6b717f, 0.5), 0.2);
$fill: opacify(rgba(#6b717f, 0.5), 0.2);

@use "sass:color";

// Same fixed addition as fade-in
$fill: color.adjust(rgba(#6b717f, 0.5), $alpha: 0.2);

// Usually better — 20% more opaque relative to the original
$fill: color.scale(rgba(#6b717f, 0.5), $alpha: 20%);

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

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

🛠 Compatibility

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

Examples Gallery

Examples use deprecated global fade-in() / opacify() plus modern scale / adjust migrations. Open View Compiled CSS for verified output (matches official Sass docs samples).

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

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

.card {
  background: rgba(225, 215, 210, 0.5);
}
.card.strong {
  background: rgba(225, 215, 210, 0.9);
}

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

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

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

// rgba(#036, 0.7) has alpha 0.7, so when fade-in() adds 0.3 it returns a fully
// opaque color.
@debug fade-in(rgba(#036, 0.7), 0.3); // #036

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

.deep {
  color: #003366;
}

@use "sass:color";

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

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

.deep {
  --fade-in: #003366;
  --scale: rgba(0, 51, 102, 0.79);
}

@use "sass:color";

.tokens {
  --legacy: #{fade-in(rgba(#6b717f, 0.5), 0.2)};
  --adjust: #{color.adjust(rgba(#6b717f, 0.5), $alpha: 0.2)};
  --brand: #{fade-in(rgba(#336699, 0.2), 0.3)};
}

.tokens {
  --legacy: rgba(107, 113, 127, 0.7);
  --adjust: rgba(107, 113, 127, 0.7);
  --brand: rgba(51, 102, 153, 0.5);
}

🚀 Real-World Use Cases

• Reading legacy SCSS — recognize fade-in() / opacify() 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-in on already-opaque washes that snap to solid.
• Pairing with transparentize — 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-in() — that name does not exist in sass:color.
• High alpha + large amounts — easy to clamp to fully opaque unexpectedly.
• Modern color spaces — $color must be legacy for global fade-in.
• Confusing with color.opacity() — that helper reads alpha; fade-in writes a new color.

💡 Best Practices