Modal Backdrop Style - Glassmorphism

[LostRhapsody]

Adapt our super fun glassmorphism trend on either the modal backdrop, which I think looks pretty great, or the modals themselves, which I haven't tried yet.

Start with this code for a class If using on the modal backdrop, also include opacity: 1 to override Bootstrap's default opacity.

    background: rgb(255 255 255 / 10%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgb(0 0 0 / 10%);

[LostRhapsody]

If using on modals themselves, remove the modal-header, modal-footer, and modal-body bg color property in styles.css.

Also update code to:

modal-content {
    background: rgb(255 255 255 / 15%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
    opacity: 1;
}
textarea {
   background: var(--sub-alt-color)
}

Though I prefer the solid modal I think. Easier to read.