html - CSS 画像の影/明るさ

Question

以下に示すように、CSS を使用して作成した円があります。

.circle {
    width: 40px;
    height: 40px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    text-align: center;
    margin-left:auto;
    margin-right:auto;
    color: #555555;
    line-height: 40px;
    font-weight: bold;
    border: 4px solid #333;
}

下のサンプル画像でわかるように、CSS を使用してこの円の周りに影/明るさを作成するにはどうすればよいですか?

前もって感謝します！