Css3 circle glow, как свечение лунного света

Я пытаюсь создать луну со светом. как в изображениях.

Я пробовал, но не очень успешно.

Я не хочу использовать изображение на веб-сайте. Я хочу создать только это с помощью CSS3.

Мой круг создает очень маленький, а также свечение находится в небольшой области. я хочу свечение в области большого радиуса

http://jsfiddle.net/naresh_kumar/ezUfG/6/

enter image description here

Html

<div>
    <span>Glow</span>
</div>

Css

div {
    margin: 20px 10px 10px;
    text-align: center;
    font-family: sans-serif;
}

span {
    display: inline-block;
    padding-top: 40px;
    background: whiteSmoke;
    width: 100px;
    height: 60px;
    text-align: center;
    vertical-align: middle;

    -webkit-box-shadow: 0 0 10px #F8A50E;
       -moz-box-shadow: 0 0 10px #F8A50E;
            box-shadow: 0 0 10px #F8A50E;

    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;

    -webkit-transition: box-shadow .4s ease;
       -moz-transition: box-shadow .4s ease;
        -ms-transition: box-shadow .4s ease;
         -o-transition: box-shadow .4s ease;
            transition: box-shadow .4s ease;
}

span:hover {
    -webkit-box-shadow: 0 0 10px red;
       -moz-box-shadow: 0 0 10px red;
            box-shadow: 0 0 0 10px red;
}

Ответы

Ответ 1

использовать box-shadow:)

В этом примере используются две разделенные запятой тени:

  box-shadow:0 0 50px gold,0 0 150px gold;

http://codepen.io/gcyrillus/pen/qdcos

Вы также можете рисовать его с помощью радиального градиента. Результат будет варьироваться от браузера до браузера.

Ответ 2

Вместо этого стиля для box-shadow:

box-shadow: 0 0 0 10px red;

Попробуйте следующее:

box-shadow: 0 0 10px red;

Изменить: Если вы хотите, чтобы свечение было больше, просто увеличьте радиус:

box-shadow: 0 0 30px red;

jsFiddle здесь

Ответ 3

Я считаю, что это то, что вы хотите:

span:hover {
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    border-radius: 70px;   
    -webkit-box-shadow:0px 0px 10px red;
    -moz-box-shadow: 0px 0px 10px red;
    box-shadow: 0px 0px 10px red;
}

Демо: http://jsfiddle.net/ezUfG/10/