Sass opacify()

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

Definition and Usage

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

Deprecated.

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

Official idea.

opacify(rgba(#6b717f, 0.5), 0.2) → rgba(107, 113, 127, 0.7). But opacify(rgba(#036, 0.7), 0.3) → solid #036, while color.scale(rgba(#036, 0.7), $alpha: 30%) → rgba(0, 51, 102, 0.79).

Legacy colors only.

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

Syntax

Syntax

SCSS
// Deprecated globals (aliases)
opacify($color, $amount);
fade-in($color, $amount);

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

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

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

Reference

Migrate to scale / adjust

Official migration paths:

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

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

Code

SCSS Examples

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

Example 1 — Alpha 0.5 → 0.7 (Official Docs)

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

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

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

How It Works

  1. Add 0.2 to alpha (0.5 → 0.7).
  2. Room below 1 means the wash still looks translucent.
  3. Strong state emits finished rgba().
  4. Risky when the color is already mostly opaque (see Example 3).

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

Same API, different name: alpha 0.5 + 0.4 → 0.9.

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

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

How It Works

  1. fade-in and opacify are interchangeable.
  2. Alpha 0.5 + 0.4 becomes 0.9.
  3. Custom properties store wash vs stronger fill.
  4. Migrate both names as the same deprecated step.

Example 3 — High Alpha + Amount → Solid (Official Docs)

Alpha 0.7 plus 0.3 clamps to fully opaque.

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

.deep {
  color: opacify(rgba(#036, 0.7), 0.3);
}

How It Works

  1. Alpha starts at 0.7.
  2. Add 0.3 → hits 1.0 → fully opaque.
  3. You asked for “a bit more opaque” and wiped the transparency out.
  4. Dart Sass may emit #003366 (same navy as shorthand #036).

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

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

SCSS
@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 {
  --opacify: #{opacify(rgba(#036, 0.7), 0.3)};
  --scale: #{color.scale(rgba(#036, 0.7), $alpha: 30%)};
}

How It Works

  1. Side-by-side shows the trap vs the fix.
  2. opacify collapses to solid.
  3. scale keeps alpha near 0.79.
  4. Prefer scale in new SCSS for overlays and hover fills.

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

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

SCSS
@use "sass:color";

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

How It Works

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

Edge Cases & Pitfalls

Most opacify bugs are fixed math on already-opaque washes, or expecting a module API.

opaque

Overshoot → solid

If alpha plus $amount hits 1, you get a fully opaque color. Use color.scale instead.

module

No color.opacify()

After @use "sass:color", call scale or adjust — not color.opacify.

units

Amount is 0–1, not %

opacify($c, 0.3) adds 0.3 alpha. Relative “30% more opaque” is scale(..., $alpha: 30%).

alias

Same as fade-in

Treat opacify and fade-in as one deprecated API when searching and migrating.

Toolchain

Sass Support

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

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

Compile with the Dart Sass CLI.

Remember

Key Takeaways

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

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

Migrate

Migrate Notes

Conceptual flow:

flow.txt
1. Find opacify($color, $amount) or fade-in($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 opacify() / fade-in() call

Frequently Asked Questions

opacify($color, $amount) increases a legacy color’s alpha by $amount (0–1). Example: opacify(rgba(#6b717f, 0.5), 0.2) is rgba(107, 113, 127, 0.7); opacify(rgba(#036, 0.7), 0.3) is fully opaque #036.
Yes. Official Sass docs list opacify($color, $amount) and fade-in($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 opacity changes, or color.adjust($color, $alpha: $amount) to keep the old math.
Because opacify() is usually not the best way to make a color more opaque, it is not included in the new module system. Use color.scale or color.adjust instead.
opacify adds a fixed alpha amount (0.7 + 0.3 becomes fully opaque). color.scale($c, $alpha: 30%) makes the color 30% more opaque than it was, which is usually what designers want.
For the same fixed addition: color.adjust($color, $alpha: $amount). For better relative opacity: color.scale($color, $alpha: $percent). fade-in() migrates the same way.

Next: Sass fade-in()

Same deprecated helper under its fade-in() alias.

fade-in() →

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.lightness Function Sass fade-in Function