# CSS Image Effects #4: Bokeh Textures

DevFeed: [CSS Image Effects #4: Bokeh Textures](<https://devfeed.tech/articles/css-image-effects-4-bokeh-textures-28776.md>)

Original publisher: [Read original article](<https://una.im/bokeh/>)

Published: 2015-10-18T00:00:00Z

Content type: tutorial

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [image effects](<https://devfeed.tech/topics/image-effects.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [effect](<https://devfeed.tech/tags/effect.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [image-effects](<https://devfeed.tech/tags/image-effects.md>), [patterns](<https://devfeed.tech/tags/patterns.md>), [photography](<https://devfeed.tech/tags/photography.md>)

## AI overview

This tutorial explains how to recreate the visual illusion of bokeh photography with CSS. It covers layering image textures with blend modes, using gradients and box shadows to form blurred circles, positioning those circles, and combining them into patterns that can be randomized.

## Source excerpt

Bokeh textures are very popular in photography. Let's take a look at how to create our own.