简体   繁体   中英

Radial gradient background

I want to make a decent but professional looking attractive body background for my website.
It should look like Twitter's background:

Twitter渐变背景

Can you see the blue shaded background? That's exactly what I want to make.
I don't have a good experience in web development and I'm pretty new to it. Please help me to create this background.

You can use this generator here

Example markup using those colors:

/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);

/* Opera */ 
background-image: -o-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #A3CEF2), color-stop(1, #5D95CC));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center, circle farthest-corner, #A3CEF2 0%, #5D95CC 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle farthest-corner at center, #A3CEF2 0%, #5D95CC 100%);

The css they use are as follows:

.mobile-callout {
 background: radial-gradient(circle, #94D2F8, #3A92C8) repeat scroll 0% 0% transparent;
}
.front-page {
 background-color: #292929;
}

So I guess the code you are looking for is:

'...': radial-gradient(circle, #94D2F8, #3A92C8) repeat scroll 0% 0% transparent;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM