Sass fade-out()

Beginner
12 min read
Updated: Nov 2026
5 examples
Compiled CSS
Sass fade-out decreasing alpha and migrating to color.scale or color.adjust
Definition

Definition and Usage

fade-out($color, $amount) decreases 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-out(). Official docs list it as an alias of transparentize().

Deprecated.

Official Sass docs list fade-out() / transparentize() under Deprecated Functions. Fixed subtraction often overshoots (alpha 0.3 − 0.3 becomes fully transparent). Prefer color.scale($color, $alpha: -$percent) for relative transparency, or color.adjust($color, $alpha: -$amount) to keep the old math.

Official idea.

fade-out(rgba(#e1d7d2, 0.5), 0.4) → rgba(225, 215, 210, 0.1). But fade-out(rgba(#036, 0.3), 0.3) → fully transparent, while color.scale(rgba(#036, 0.3), $alpha: -30%) → rgba(0, 51, 102, 0.21).

Legacy colors only.

$color must be in rgb, hsl, or hwb. Opposite deprecated twin: fade-in() / opacify().

Syntax

Syntax

SCSS
// Deprecated globals (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 / transparentize
color.adjust($color, $alpha: -$amount);

Pattern: recognize old fade-out / transparentize → choose scale for design intent or adjust for pixel-matching migrations.

Reference

Migrate to scale / adjust

Official migration paths:

Old / intentPrefer
fade-out($c, $amount) — relative “% more transparent”color.scale($c, $alpha: -$percent)
Keep exact old mathcolor.adjust($c, $alpha: -$amount)
transparentize($c, $amount)Same migrations as fade-out
No module formThere is no color.fade-out()

Quick mental model: fade-out = fixed alpha subtract, scale = percent of remaining room, adjust = same fixed math, modern API.

Code

SCSS Examples

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

Example 1 — Alpha 0.5 → 0.1 (Official Docs)

A soft taupe wash becomes nearly invisible by a fixed 0.4 alpha.

SCSS
@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);
  }
}

How It Works

  1. Subtract 0.4 from alpha (0.5 → 0.1).
  2. Room above 0 means the wash still has a faint tint.
  3. Ghost state emits finished rgba().
  4. Risky when the color is already mostly transparent (see Example 3).

Example 2 — transparentize() Alias (Official Docs)

Same API, different name: alpha 0.5 − 0.2 → 0.3.

SCSS
@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)};
}

How It Works

  1. transparentize and fade-out are interchangeable.
  2. Alpha 0.5 − 0.2 becomes 0.3.
  3. Custom properties store wash vs ghost fill.
  4. Migrate both names as the same deprecated step.

Example 3 — Low Alpha + Amount → Invisible (Official Docs)

Alpha 0.3 minus 0.3 clamps to fully transparent.

SCSS
// 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);
}

How It Works

  1. Alpha starts at 0.3.
  2. Subtract 0.3 → hits 0 → fully transparent.
  3. You asked for “a bit more transparent” and wiped the color out.
  4. Classic reason official docs discourage fade-out.

Example 4 — Prefer color.scale() (Official Docs)

Same seed color, relative −30% alpha keeps a usable translucent navy.

SCSS
@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%)};
}

How It Works

  1. Side-by-side shows the trap vs the fix.
  2. fade-out collapses to invisible.
  3. scale keeps alpha near 0.21.
  4. Prefer scale in new SCSS for ghost buttons and overlays.

Example 5 — Preserve Old Math with color.adjust()

Match fade-out(rgba(#e1d7d2, 0.5), 0.4) exactly when migrating.

SCSS
@use "sass:color";

.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)};
}

How It Works

  1. --legacy and --adjust match — safe visual swap.
  2. Use $alpha: -$amount (subtract opacity).
  3. Still consider scale when redesigning overlay tokens.
  4. Module form documents where the helper comes from.

Edge Cases & Pitfalls

Most fade-out bugs are fixed math on already-faint washes, or expecting a module API.

invisible

Overshoot → fully transparent

If alpha minus $amount hits 0, the color disappears. Use color.scale instead.

module

No color.fade-out()

After @use "sass:color", call scale or adjust — not color.fade-out.

units

Amount is 0–1, not %

fade-out($c, 0.3) subtracts 0.3 alpha. Relative “30% more transparent” is scale(..., $alpha: -30%).

alias

Same as transparentize

Treat fade-out and transparentize as one deprecated API when searching and migrating.

Toolchain

Sass Support

Global fade-out / transparentize still compile, but new work should use the module writers.

FeatureStatus
Global fade-out() / transparentize()Deprecated — still available for legacy SCSS
color.scale(..., $alpha: -…)Preferred relative transparency
color.adjust(..., $alpha: -…)Same fixed math as fade-out
color.fade-out()Does not exist

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Deprecated: fixed alpha subtraction on legacy colors (alias of transparentize).
  • Prefer color.scale for “percent more transparent.”
  • Use color.adjust(..., $alpha: -$amount) when you must match old pixels.
  • No module form — there is no color.fade-out().

One line: learn fade-out to read legacy overlays; write scale (or adjust) in new code.

Migrate

Migrate Notes

Conceptual flow:

flow.txt
1. Find fade-out($color, $amount) or transparentize($color, $amount)
2. Want "% more transparent"? → color.scale($color, $alpha: -$percent)
3. Need same pixels? → color.adjust($color, $alpha: -$amount)
4. @use "sass:color"
5. Delete the global fade-out() / transparentize() call

Frequently Asked Questions

fade-out($color, $amount) decreases a legacy color’s alpha by $amount (0–1). Example: fade-out(rgba(#e1d7d2, 0.5), 0.4) is rgba(225, 215, 210, 0.1); fade-out(rgba(#036, 0.3), 0.3) is fully transparent rgba(0, 51, 102, 0).
Yes. Official Sass docs list fade-out($color, $amount) and transparentize($color, $amount) as aliases that return the same color.
Yes. Official Sass docs list it under Deprecated Functions and omit it from the sass:color module. Prefer color.scale() for relative transparency, or color.adjust($color, $alpha: -$amount) to keep the old math.
Because fade-out() is usually not the best way to make a color more transparent, it is not included in the new module system. Use color.scale or color.adjust instead.
fade-out subtracts a fixed alpha amount (0.3 − 0.3 becomes fully transparent). color.scale($c, $alpha: -30%) makes the color 30% more transparent than it was, which is usually what designers want.
For the same fixed subtraction: color.adjust($color, $alpha: -$amount). For better relative transparency: color.scale($color, $alpha: -$percent). transparentize() migrates the same way.

Next: CSS Introduction

Continue into the CSS tutorial track after Sass color helpers.

CSS Introduction →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

Sass transparentize Function CSS Introduction