# CSS blend mode Text Effects - Glass Text Effects Tutorial
[竹白記事本](https://chupainotebook.blogspot.com/2019/02/css-effect.html)，學習紀錄，2019/03/05。

>[CSS Transparent Text Effects - CSS blend mode Text Effects - Glass Text Effects Tutorial](https://www.youtube.com/watch?v=kqtxpl-vxjw)

###### tags: `mix-blend-mode`

## CodePen
>[CSS blend mode Text Effects - Glass Text Effects Tutorial](https://codepen.io/chupai/pen/XGXwNw?editors=1100)

<iframe height="265" style="width: 100%;" scrolling="no" title="Glass Text Effects Tutorial" src="//codepen.io/chupai/embed/XGXwNw/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/chupai/pen/XGXwNw/'>Glass Text Effects Tutorial</a> by Chupai@Design
(<a href='https://codepen.io/chupai'>@chupai</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

## mix-blend-mode
直接在網頁呈現 Photoshop 的圖層混合糢式。
- `normal`，一般（預設值）。
- `multiply`，色彩增值。
- `screen`，濾色。
- `overlay`，覆蓋。
- `darken`，變暗。
- `lighten`，變亮
- `color-dodge`，加亮顏色（減淡）。
- `color-burn`，加深顏色。
- `hard-light`，實光。
- `soft-light`，柔光。
- `difference`，差異化。
- `exclusion`，排除。
- `hue`，色相。
- `saturation`，飽和度。
- `color`，顏色。
- `luminosity`，明度。

瀏覽器支援度：[mix-blend-mode｜Can I use](https://caniuse.com/#feat=css-mixblendmode)