Есть ли способ сделать цвета ярче в CSS?

Я пытаюсь создать коробку с тремя световыми трубками вокруг нее в CSS. То, что у меня есть сейчас, выглядит так:

<div class = "neon1" style = "height:100%">
    <div class = "neon2" style = "height:100%">
        <div class = "neon3" style = "height:100%">
            <div class = "neon4" style = "height:100%">
                RenderSidebar
            </div>
        </div>
    </div>
</div>

.neon4 {
    outline: none;
    border-radius: 7px;
    border-color: red;
    box-shadow: 0 0 10px red;
    padding: 5px;
    border-bottom: none;
    border-width: 20px
}

.neon3 {
    outline: none;
    border-radius: 10px;
    border-color: darkorange;
    box-shadow: 0 0 10px darkorange;
    padding: 5px;
    border-bottom: none;
}

.neon2 {
    outline: none;
    border-radius: 13px;
    border-color: blue;
    box-shadow: 0 0 10px blue;
    padding: 5px;
    border-bottom: none;
}

.neon1 {
    outline: none;
    border-radius: 16px;
    border-color: blue;
    box-shadow: 0 0 2px blue;
    padding: 5px;
    background-color: white;
    border-bottom: none;
}

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

Кроме того, и это менее важно, есть ли способ заставить CSS выполнять работу по созданию и вложению элементов div вместо того, чтобы делать это в HTML?

Спасибо! Лиза