Here is a nice background image that might be useful in your design. It’s a bokeh image from Divya Manian, who has created this fabulous decorative background using CSS3. Her reference to the bokeh image’s characteristics are as follows:

1. Circles are close to each other and should be in groups with each group having same color.
2. Color transition from one group to another can be done with blurry second color group radial gradient overlaid on the first group.
3. Each group needs to have blurry large background circle that the rest will base from.
4. Each group has smaller circles and one big blurry circle as base.
5. Colors used should be transparent so the background color will show and the colors will mix well when overlaid.

Here’s the CSS:

body {

background-color: black;

background-image: -webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40,from(rgba(150, 111, 195, 0.2)), color-stop(0.3, rgba(150, 111, 195, 0.3)),  to(transparent)),

-webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)),

-webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(224, 124, 203, 0.1)), color-stop(0.2, rgba(224, 124, 203, 0.2)), to(transparent)),

-webkit-gradient(radial, 50% 50%, 38, 50% 50%, 46, from(rgba(145, 75, 113, 0.3)), color-stop(0.3, rgba(145, 75, 113, 0.4)),  to(transparent)),

-webkit-gradient(radial, 50% 50%, 20, 50% 50%, 80, from(rgba(145, 75, 113, 0)), color-stop(0.3, rgba(145, 75, 113, 0.2)),  to(transparent)),

-webkit-gradient(radial, 50% 50%, 30, 50% 50%, 90, from(rgba(145, 75, 113, 0)), color-stop(0.5, rgba(145, 75, 113, 0.2)), to(transparent)),

-webkit-gradient(radial, 50% 50%, 30, 50% 50%, 50, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37,85,79, 0.3)), to(transparent)),

-webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37,85,79, 0.3)), to(transparent)),

-webkit-gradient(radial, 50% 50%, 26, 50% 50%, 30, from(rgba(37, 85, 79, 0.2)), color-stop(0.2, rgba(37,85,79, 0.3)), to(transparent)),

-webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(37, 85, 79, 0.3)), color-stop(0.2, rgba(37,85,79, 0.4)), to(transparent)),

-webkit-gradient(radial, 50% 50%, 30, 50% 50%, 50, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.1)), to(transparent)),

-webkit-gradient(radial, 50% 50%, 16, 50% 50%, 20, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.2)), to(transparent)),

-webkit-gradient(radial, 50% 50%, 26, 50% 50%, 30, from(rgba(114, 209, 244, 0.1)), color-stop(0.2, rgba(114, 209, 244, 0.2)), to(transparent)),

-webkit-gradient(radial, 50% 50%, 36, 50% 50%, 40, from(rgba(114, 209, 244, 0.2)), color-stop(0.2, rgba(114, 209, 244, 0.3)), to(transparent))

;

background-image: -webkit-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px),

-webkit-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px),

-webkit-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px),

-webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px),

-webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px),

-webkit-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px),

-webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px),

-webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px),

-webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px),

-webkit-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px),

-webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px),

-webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px),

-webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px),

-webkit-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px)

;

background-image: -moz-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px),

-moz-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px),

-moz-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px),

-moz-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px),

-moz-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px),

-moz-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px),

-moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px),

-moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px),

-moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px),

-moz-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px),

-moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px),

-moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px),

-moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px),

-moz-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px)

;

background-image: -o-radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px),

-o-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px),

-o-radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px),

-o-radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px),

-o-radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px),

-o-radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px),

-o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px),

-o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px),

-o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px),

-o-radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px),

-o-radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px),

-o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px),

-o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px),

-o-radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px)

;

background-image: radial-gradient(circle contain, rgba(150, 111, 195, 0.2) 36px, rgba(150, 111, 195, 0.3) 38px, transparent 40px),

radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px),

radial-gradient(circle contain, rgba(224, 124, 203, 0.2) 16px, rgba(224, 124, 203, 0.3) 17px, transparent 20px),

radial-gradient(circle contain, rgba(145, 75, 113, 0.2) 38px, rgba(145, 75, 113, 0.3) 41px, transparent 46px),

radial-gradient(circle contain, rgba(145, 75, 113, 0) 20px, rgba(145, 75, 113, 0.2) 38px, transparent 80px),

radial-gradient(circle contain, rgba(145, 75, 113, 0) 30px, rgba(145, 75, 113, 0.2) 60px, transparent 90px),

radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 30px, rgba(37, 85, 79, 0.3) 34px, transparent 50px),

radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 16px, rgba(37, 85, 79, 0.3) 17px, transparent 20px),

radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 26px, rgba(37, 85, 79, 0.3) 27px, transparent 30px),

radial-gradient(circle contain, rgba(37, 85, 79, 0.2) 36px, rgba(37, 85, 79, 0.3) 37px, transparent 40px),

radial-gradient(circle contain, rgba(114, 209, 244, 0.1) 30px, rgba(114, 209, 244, 0.1) 34px, transparent 50px),

radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 16px, rgba(114, 209, 244, 0.3) 17px, transparent 20px),

radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 26px, rgba(114, 209, 244, 0.3) 27px, transparent 30px),

radial-gradient(circle contain, rgba(114, 209, 244, 0.2) 36px, rgba(114, 209, 244, 0.3) 37px, transparent 40px)

;

-moz-background-size: 300px 300px;

background-size: 300px 300px;

background-position: 30px -5px, 80px -70px, 10px -40px, 50px -50px, 20px -80px, 60px -10px, -50px -60px, -60px -20px, -80px -80px, -160px -30px, 20px -30px, 130px -60px, 180px -40px, 180px 0px;

}

.no-cssgradients body {

background-color: black;

background-image: url(data:image/svg+xml;base64,H4sICBWwZk0AA2Jva2VoLnN2ZwC9lmtuozAUhf9nFZZHlRIpAV%2BDgVY4lUYjdQGzAkocQEOhMiRkdj82xIzCI30o7R9jlPicz%2FceW4SPp5ccHYWssrLgGCyCH7eLsDomqMl2dcoxIwSjVGRJWnPs6Be1oqg4Tuv69cG2m6axGscqZWJTQoitluLtYoHCndhX2wVC4T7LayFRtuP4OT9I%2BC%2BnFtxhY9S9%2FOV4w%2FTkdJ5oCaUhnqJDVWVR8VNJoKre%2FRLHLKo7aowy9fhdHmQsnmT0mmYxtltvuzOf4mA352Cf4vBvzuG%2Fg0M1yO46pGYJqmVUVPtSvnDcTvOoFksKZI3AIyuM1LKc46IsRNtcFMaZjHOBpMpEgFF80tlQzxYXKx5Z%2FhEcy%2BQ5WgLTMgBquGdrRCxnZf6xMXttHRQYxweZL3%2B0Oeltp1Wo%2Bt0ewoDfwQQGxicDGkpdJaEHShytw0Y0FnsbZyQDHc4ljdfRgKFxv53mEsiFDoj1vRoCgauK6zNdaufzvZoQGdbGxIYalODjKLquIxZ%2FhYdeHum8POMFb3nRCTNn1mywM7dz2%2FRV9oZ2jr9GgXa8N0m%2B9JqyGtT4UgLYVPzOh2HT75teB4EvAqEGJJht9veAOAYE%2BpI410nGOfgwCZ0%2BiyYmdJYEoD3QSoS67nRZpu4GNj4AJgngzEbyHWZwvorya0vmeg%2FB7CV4C2tyrd2995ds%2Buwc2oke1PfP9h%2F9egCnVgkAAA%3D%3D), url(data:image/svg+xml;base64,H4sICBWwZk0AA2Jva2VoLnN2ZwC9lmtuozAUhf9nFZZHlRIpAV%2BDgVY4lUYjdQGzAkocQEOhMiRkdj82xIzCI30o7R9jlPicz%2FceW4SPp5ccHYWssrLgGCyCH7eLsDomqMl2dcoxIwSjVGRJWnPs6Be1oqg4Tuv69cG2m6axGscqZWJTQoitluLtYoHCndhX2wVC4T7LayFRtuP4OT9I%2BC%2BnFtxhY9S9%2FOV4w%2FTkdJ5oCaUhnqJDVWVR8VNJoKre%2FRLHLKo7aowy9fhdHmQsnmT0mmYxtltvuzOf4mA352Cf4vBvzuG%2Fg0M1yO46pGYJqmVUVPtSvnDcTvOoFksKZI3AIyuM1LKc46IsRNtcFMaZjHOBpMpEgFF80tlQzxYXKx5Z%2FhEcy%2BQ5WgLTMgBquGdrRCxnZf6xMXttHRQYxweZL3%2B0Oeltp1Wo%2Bt0ewoDfwQQGxicDGkpdJaEHShytw0Y0FnsbZyQDHc4ljdfRgKFxv53mEsiFDoj1vRoCgauK6zNdaufzvZoQGdbGxIYalODjKLquIxZ%2FhYdeHum8POMFb3nRCTNn1mywM7dz2%2FRV9oZ2jr9GgXa8N0m%2B9JqyGtT4UgLYVPzOh2HT75teB4EvAqEGJJht9veAOAYE%2BpI410nGOfgwCZ0%2BiyYmdJYEoD3QSoS67nRZpu4GNj4AJgngzEbyHWZwvorya0vmeg%2FB7CV4C2tyrd2995ds%2Buwc2oke1PfP9h%2F9egCnVgkAAA%3D%3D);

background-position: 120px 0, -155px 0px;

background-repeat: repeat;

background-size: auto;

}

 

Click on the image for the full tutorial and demo.

 

Incoming search terms for the article:

• nice background design
• background image css
• css3 bokeh
• background css3
• css background image
• Divya Manian
• css3 background image
• css3 backgrounds
• bokeh repeat background
• css3 background