【HTML/CSS】CSSでLEDランプ、あるいは信号機みたいな感じの「丸」を作ってみたい

見た目がなんかこう光ってる丸いマークみたいなのが欲しかった

デザインでLEDランプ（電気製品についてる発光ダイオードみたいなランプ）とか信号機みたいな感じのやつが欲しかった
けど探しても案外見つからなかったのでCSS書いてみた

できたやつ（CodePen）

See the Pen LED lamp(Traffic Light) by sola-msr (@sola-msr) on CodePen.

ソースコード

<div id="app">
  <div class="green-circle"></div>
  <div class="yellow-circle"></div>
  <div class="red-circle"></div>
</div>

#app {
  text-align: center;
}

.green-circle {
    display: inline-block; /* センター寄せ用 */
    background-color: rgb(0, 255, 0); /* ベースカラー */
    box-shadow: 0 0 3px 3px rgb(224, 255, 211), 3px 3px 5px 3px rgb(200, 255, 0) inset; /* 外側のカラー・左上のカラー */
    height:20px; /* 円の大きさ */
    width:20px;  /* 円の大きさ */
    border-radius:50%; /* まるみ */
    /* 以下はそろえるだけの為のmargin */
    margin-right: 10px;
    margin-bottom: 5px;
    margin-top: 2px;
}

.yellow-circle {
    display: inline-block;
    background-color: rgb(255, 230, 0);
    box-shadow: 0 0 3px 3px rgb(251, 255, 199), 3px 3px 5px 3px rgb(244, 255, 93) inset;
    height:20px;
    width:20px;
    border-radius:50%;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-top: 2px;
}

.red-circle {
    display: inline-block;
    background-color: rgb(255, 0, 0);
    box-shadow: 0 0 3px 3px rgb(255, 213, 213), 3px 3px 5px 3px rgb(255, 166, 0) inset;
    height:20px;
    width:20px;
    border-radius:50%;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-top: 2px;
}

おわり

• CSSわからなさすぎる
• ということで正しいかは自信ないです