Sass transparentize()

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

Definition and Usage

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

Deprecated.

Official Sass docs list transparentize() / fade-out() 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.

transparentize(rgba(#6b717f, 0.5), 0.2) → rgba(107, 113, 127, 0.3). But transparentize(rgba(#036, 0.3), 0.3) → rgba(0, 51, 102, 0), 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: opacify() / fade-in().

Syntax

Syntax

SCSS
// Deprecated globals (aliases)
transparentize($color, $amount);
fade-out($color, $amount);

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

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

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

Reference

Migrate to scale / adjust

Official migration paths:

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

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

Code

SCSS Examples

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

Example 1 — Alpha 0.5 → 0.3 (Official Docs)

A semi-transparent slate becomes softer by a fixed 0.2 alpha.

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

.overlay {
  background: rgba(#6b717f, 0.5);
  &.soft {
    background: transparentize(rgba(#6b717f, 0.5), 0.2);
  }
}

How It Works

  1. Subtract 0.2 from alpha (0.5 → 0.3).
  2. Room above 0 means the wash still shows.
  3. Soft state emits finished rgba().
  4. Risky when alpha is already low (see Example 3).

Example 2 — fade-out() Alias (Official Docs)

Same API, different name: alpha 0.5 − 0.4 → 0.1.

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

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

How It Works

  1. fade-out and transparentize are interchangeable.
  2. Alpha 0.5 − 0.4 becomes 0.1.
  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 transparentize() subtracts 0.3 it
// returns a fully transparent color.
@debug transparentize(rgba(#036, 0.3), 0.3); // rgba(0, 51, 102, 0)

.deep {
  color: transparentize(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. RGB channels remain — only alpha is zero.

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

Same seed color, relative −30% transparency 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 {
  --transparentize: #{transparentize(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. transparentize collapses to invisible.
  3. scale keeps alpha near 0.21.
  4. Prefer scale in new SCSS for overlays and hover washes.

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

Match transparentize(rgba(#6b717f, 0.5), 0.2) exactly when migrating.

SCSS
@use "sass:color";

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

How It Works

  1. $alpha: -$amount mirrors transparentize’s subtraction.
  2. Legacy and adjust emit the same 0.3 wash.
  3. Brand token shows 0.8 − 0.3 → 0.5.
  4. Use adjust only when you must match old pixels; prefer scale for new work.

Edge Cases & Pitfalls

Most transparentize bugs are treating $amount like a percent, hitting alpha 0, or forgetting it is global-only.

amount

$amount is 0–1, not a percent

Write 0.2, not 20%. Percentages belong on color.scale.

zero

Low alpha + amount → invisible

If start alpha ≤ amount, you get a fully transparent color.

legacy

Legacy colors only

oklch / display-p3 tokens need modern writers like scale / adjust.

module

No color.transparentize()

Migrate to color.scale or color.adjust after @use "sass:color".

Toolchain

Sass Support

transparentize() / fade-out() are deprecated globals. Prefer module writers on modern Dart Sass.

APIStatus
transparentize() / fade-out()Deprecated global builtins
color.transparentize()Not provided
color.scale() / color.adjust()Preferred modern writers
LibSass / Ruby SassLegacy globals only (avoid for new work)

Compile with the Dart Sass CLI.

Remember

Key Takeaways

  • Fixed alpha subtract on legacy colors — alias of fade-out().
  • Prefer color.scale with a negative $alpha percent for relative transparency.
  • Use color.adjust with $alpha: -$amount only when matching old pixels.
  • No module form — deprecated globals will warn toward Sass 3.0.

One line: treat transparentize as legacy — new fades should use color.scale(..., $alpha: -$percent).

Practice

Migrate Notes

Practical checklist:

checklist.txt
1. Find transparentize() / fade-out() globals
2. Prefer color.scale($c, $alpha: -$percent) for relative fades
3. Use color.adjust($c, $alpha: -$amount) only to match old math
4. Remember $amount is 0–1, not a CSS percent
5. Watch low-alpha + large amount → fully transparent

Frequently Asked Questions

transparentize($color, $amount) decreases a legacy color’s alpha by $amount (0–1). Example: transparentize(rgba(#6b717f, 0.5), 0.2) is rgba(107, 113, 127, 0.3); transparentize(rgba(#036, 0.3), 0.3) is fully transparent rgba(0, 51, 102, 0).
Yes. Official Sass docs list transparentize($color, $amount) and fade-out($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 transparentize() 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.
transparentize 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). fade-out() migrates the same way.

Next: Sass fade-out()

Same deprecated API under the fade-out alias name.

fade-out() →

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 color.saturation Function Sass fade-out Function