Filament v3 Custom Login

app.css

.fi-simple-main-ctn::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.90;
    background-image: radial-gradient(
        circle at top,
        theme('colors.primary.300'),
        theme('colors.transparent'),
        theme('colors.transparent') 100%
    );
}

.dark .fi-simple-main-ctn::before {
    background-image: radial-gradient(
        circle at top,
        theme('colors.primary.800'),
        theme('colors.gray.950'),
        theme('colors.gray.950') 100%
    );
}

.fi-simple-layout::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1605362001336-f91645086f32?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80');
    background-size: cover;
    background-position-y: bottom;
    filter: grayscale(100) invert(100) blur(10px);
}

.dark .fi-simple-layout::before {
    filter: grayscale(100);
}

.fi-simple-main {
    @apply relative dark:!bg-gray-950/60 backdrop-blur-2xl;
}

.fi-simple-main::before {
    @apply absolute inset-x-0 mx-auto h-px w-2/3 bg-gradient-to-r from-transparent via-primary-500 to-transparent dark:from-transparent dark:via-primary-500 dark:to-transparent;
    content: '';
    z-index: 1;
    top: -1px;
}