Version: 1.1.alpha.0
Source on Github

Compass Opacity

Provides cross-browser CSS opacity. See CSS3 spec: transparency.

This file can be imported using: @import "compass/css3/opacity"


css3 mixin for opacity


  1. Browser Support – Provides configuration options for the Compass Browser Support Matrix.

Configurable Variables help


The support usage threshold for opacity. Defaults to the global threshold for graceful degradation.


view source

  +for-legacy-browser("ie", "8", $threshold: $opacity-usage-threshold)
    @if $opacity == 1
      filter: unquote("progid:DXImageTransform.Microsoft.Alpha(enabled=false)")
      filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})")

  opacity: $opacity
@mixin opacity($opacity) {
  @include for-legacy-browser("ie", "8", $threshold: $opacity-usage-threshold) {
    @if $opacity == 1 {
      filter: unquote("progid:DXImageTransform.Microsoft.Alpha(enabled=false)");
    @else {
      filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");

  opacity: $opacity;

Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.

@param $opacity
    A number between 0 and 1, where 0 is transparent and 1 is opaque.
view source

@mixin transparent {
  @include opacity(0);

Make an element completely transparent.

view source

@mixin opaque {
  @include opacity(1);

Make an element completely opaque.