如何在导航周围创建径向渐变？

Question

See the radial gradient flowing around the center of the navigation? Lets suppose I made a div that is the navigation. How would I create a gradient that looks like in the picture?

Note: Look at the background behind the menu.

Answer 1

If you talk about the lighter brown glow that is behind the navigation you can do this with CSS3...: http://jsfiddle.net/Jg8ZC/

  background: #45392d;
  background-repeat: no-repeat;
  background-image: -webkit-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* New WebKit syntax */  
  background-image: -moz-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%);  /* Firefox */  
  background-image: -ms-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* IE10+ */  
  background-image: -o-radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%); /* Opera (13?) */  
  background-image: radial-gradient(center center, circle contain, #624a36 0%, #45392d 80%; /* standard syntax */

This way it will work in every modern browser.

Answer 2

This is not a radial gradient. It seems to be a graphic.

As for CSS, Look her http://www.the-art-of-web.com/css/radial-gradients/ or in google. Theres plenty of resources out there

Here is a editor http://www.westciv.com/tools/radialgradients/index.html

Example

Answer 3

If you want to do this with CSS, you could use a radial gradient :

background-image: -webkit-radial-gradient(contain, #bf8230 0%, #a65f00 100px);

Example (jsFiddle).

The above will create a circular glow with a radius of 100px centered in the padding-box of the <div> .

If you want to make a glow "around" an element, you could nest an element with a semitransparent gradient background inside one with a solid background, as in this example . You'd have to make sure that the nested element doesn't fill its container, and that its padding box can include the entire glow, or it will appear "cut off".

(The example was only done for Chrome Beta, and will probably require appropriate vendor prefix incantations and testing for other browsers.)