Widely available 安全に使用可能。すべてのブラウザで長年サポートされている基本プロパティ。
カラー Widely available

opacity property

opacity は要素とそのすべての子要素に対して不透明度を適用する。0 で完全に透明、1 で完全に不透明。トランジションやアニメーションと組み合わせてフェードイン・フェードアウト効果を実現する際に頻用される。新しいスタッキングコンテキストを生成する点に注意。

カラー透明度

概要

opacity は要素とそのすべての子要素に対して不透明度を適用する。0 で完全に透明、1 で完全に不透明。トランジションやアニメーションと組み合わせてフェードイン・フェードアウト効果を実現する際に頻用される。新しいスタッキングコンテキストを生成する点に注意。

対応ブラウザ

デスクトップ

Chrome 1+
Edge 12+
Safari 2+
Firefox 1+

モバイル

Chrome Android 18+
Safari iOS 1+
Firefox Android 4+

基本構文

CSS 
/* 半透明 */
.overlay {
  opacity: 0.5;
}

/* フェードインアニメーション */
.fade-in {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fade-in.visible {
  opacity: 1;
}

/* disabled 状態 */
.disabled {
  opacity: 0.4;
  pointer-events: none;
}

実務での使いどころ

  • フェードイン・フェードアウト

    要素の表示・非表示をスムーズなトランジションで切り替え、滑らかな UI を実現する。

  • オーバーレイ・モーダル背景

    モーダルの背景を半透明にし、背面のコンテンツがうっすら見える効果を演出する。

注意点

  • opacity は子要素にも適用されるため、テキストだけを半透明にしたい場合は rgba() や color-mix() で色自体の透明度を指定すること。
  • opacity: 0 の要素はクリック可能なまま残る。非表示にする場合は visibility: hidden や display: none を併用すること。

アクセシビリティ

  • opacity: 0 の要素はスクリーンリーダーからアクセス可能なまま。意図しない読み上げを防ぐには aria-hidden="true" を併用する。

参考リンク