Как сделать плавно заканчивающуюся тень (картинка внутри)

[websterjoy]

Сейчас у меня она отображается так:

вот код если что:

box-shadow: 0px 0 30px rgba(0, 0, 0, 0.3);

А нужно вот так:

Толи есть свойство о котором я не знаю, чтоб добиться этого, толи это только картинкой можно сделать... Кто знает как это сделать?

Edited July 19, 2013 by websterjoy

[Daiver]

http://www.colorzilla.com/gradient-editor/

[Int]

Попробуй ещё поверх него сверху вниз градиент добавить

[Kelin]

http://www.colorzill...radient-editor/

Попробуй ещё поверх него сверху вниз градиент добавить

Ребята, я вас обрадую, но градиенты в box-shadow не работают.

---

Тут можно под страницу подложить слой с border-radius и box-shadow, но это жестокий костыль. Лучше реализовать картинками и не париться.

[Daiver]

градиенты в box-shadow не работают.

А что, обязательно использовать box-shadow?

Почему не сделать только градиентом?

[Kelin]

градиенты в box-shadow не работают.

А что, обязательно использовать box-shadow?

Почему не сделать только градиентом?

А как вы собираетесь одновременно с конца и сверху/снизу размытие делать?

[Vulner]

Я бы пожалуй сделал примерно так: http://jsfiddle.net/qu4BX/2/

Может вышло и не очень аккуратно, но думаю смысл понятен и если что, то можно еще поиграться

Edited July 19, 2013 by Vulner

[Daiver]

Очень помогла бы решению проблемы общая картинка того, как все должно выглядеть в конце. То есть увидеть как со всех сторон эта тень должна выглядеть.

[antonKar]

По опыту могу сказать, что если тень в макете сделана просто картинкой, то лучше её и оставлять картинкой (реализуя её, к примеру, через :after или :before), чем извращаться на CSS и тратить время на попытки догадаться.

если через функцию (не знаю как это правильно называется), то есть замечательный плагин к Photoshop, чтобы не заморачиваться.

Edited July 19, 2013 by antonKar