---
title: ColorOverlay
slug: atmosphere/color/color-overlay
description: 指定した色を、濃さを調整して画面全体に重ねます。
noindex: true
---

**Preview**

<AtmospherePreview demo="ColorOverlayDemo" />

**Code**

```tsx
import { SceneLayer, SceneStage } from 'framoo/core'
import { ColorOverlay } from 'framoo/atmosphere'

export const ColorOverlayPreview = () => (
  <SceneStage>
    <SceneLayer followsCamera>
      {/* 背景画像など */}
      <ColorOverlay color="#000000" opacity={0.28} />
    </SceneLayer>
  </SceneStage>
)
```

## API Reference

| Prop      | Type     | Default   | Description                        |
| --------- | -------- | --------- | ---------------------------------- |
| `color`   | `string` | `#000000` | 画面全体に重ねる色。CSS color。    |
| `opacity` | `number` | `0.28`    | 重ねるレイヤーの不透明度。0から1。 |