fade-in($color, $amount) increases a legacy color’s alpha by a fixed amount between 0 and 1 (inclusive) and returns a new color. It is a global built-in — there is no color.fade-in(). Official docs list it as an alias of opacify().
Official Sass docs list fade-in() / opacify() under Deprecated Functions. Fixed addition often overshoots (alpha 0.7 + 0.3 becomes fully opaque). Prefer color.scale($color, $alpha: $percent) for relative opacity, or color.adjust($color, $alpha: $amount) to keep the old math.
fade-in(rgba(#e1d7d2, 0.5), 0.4) → rgba(225, 215, 210, 0.9). But fade-in(rgba(#036, 0.7), 0.3) → solid #036, while color.scale(rgba(#036, 0.7), $alpha: 30%) → rgba(0, 51, 102, 0.79).
$color must be in rgb, hsl, or hwb. Opposite deprecated twin: fade-out() / transparentize().
// Deprecated globals (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 / opacify
color.adjust($color, $alpha: $amount);Pattern: recognize old fade-in / opacify → choose scale for design intent or adjust for pixel-matching migrations.
scale / adjustOfficial migration paths:
| Old / intent | Prefer |
|---|---|
fade-in($c, $amount) — relative “% more opaque” | color.scale($c, $alpha: $percent) |
| Keep exact old math | color.adjust($c, $alpha: $amount) |
opacify($c, $amount) | Same migrations as fade-in |
| No module form | There is no color.fade-in() |
Quick mental model: fade-in = fixed alpha add, scale = percent of remaining room, adjust = same fixed math, modern API.
Examples use deprecated global fade-in() / opacify() plus modern scale / adjust. Open View Compiled CSS for verified output (matches official Sass docs samples).
A soft taupe wash becomes more solid by a fixed 0.4 alpha.
@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);
}
}rgba().opacify() Alias (Official Docs)Same API, different name: alpha 0.5 + 0.2 → 0.7.
@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)};
}opacify and fade-in are interchangeable.Alpha 0.7 plus 0.3 clamps to fully opaque.
// 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);
}#003366 (same navy as shorthand #036).color.scale() (Official Docs)Same seed color, relative 30% opacity keeps a usable translucent navy.
@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%)};
}fade-in collapses to solid.scale keeps alpha near 0.79.scale in new SCSS for overlays and hover fills.color.adjust()Match fade-in(rgba(#6b717f, 0.5), 0.2) exactly when migrating.
@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)};
}--legacy and --adjust match — safe visual swap.$alpha: +$amount (add opacity), not a negative.scale when redesigning overlay tokens.Most fade-in bugs are fixed math on already-opaque washes, or expecting a module API.
If alpha plus $amount hits 1, you get a fully opaque color. Use color.scale instead.
After @use "sass:color", call scale or adjust — not color.fade-in.
fade-in($c, 0.3) adds 0.3 alpha. Relative “30% more opaque” is scale(..., $alpha: 30%).
Treat fade-in and opacify as one deprecated API when searching and migrating.
Global fade-in / opacify still compile, but new work should use the module writers.
| Feature | Status |
|---|---|
Global fade-in() / opacify() | Deprecated — still available for legacy SCSS |
color.scale(..., $alpha: …) | Preferred relative opacity |
color.adjust(..., $alpha: …) | Same fixed math as fade-in |
color.fade-in() | Does not exist |
Compile with the Dart Sass CLI.
opacify).color.scale for “percent more opaque.”color.adjust(..., $alpha: $amount) when you must match old pixels.color.fade-in().One line: learn fade-in to read legacy overlays; write scale (or adjust) in new code.
Conceptual flow:
1. Find fade-in($color, $amount) or opacify($color, $amount)
2. Want "% more opaque"? → color.scale($color, $alpha: $percent)
3. Need same pixels? → color.adjust($color, $alpha: $amount)
4. @use "sass:color"
5. Delete the global fade-in() / opacify() callRead the RGB red channel — prefer color.channel in new code.
8 people found this page helpful