I'm looking for a way to make the dropshadow visible only from the edge to the outside of a div, since I have a semi-transparent background

Question

The code is a react component with tailwind.

The first image is the one of the design, it happens to have a rounded edge for that reason I can't use box-shadow, so I try with filter: drop-shadow but the drawback is that it also extends into the component, this would not be a problem but the style of the card I have is semi-transparent because it has a linear background to 0% so I need something that can do a drop-shadow but from the edge of the element outwards, Thanks for reading <3

                            <div className="w-full h-full">
                                <div className="w-full h-[8.43vw] flex items-center justify-center rounded-t-[0.6770vw] bg-gradient-to-br from-custom-gray-300/50 to-custom-gray-400/0">
                                    <Image className="w-[6.25vw] h-[6.25vw]" width={120} height={120} src={'/streaming_perfil.png'}/>
                                </div>
                                <div className="w-full h-[2.656vw] rounded-b-[0.4166vw] bg-gradient-to-br from-[#BD00FF]/30 to-[#737373]/0 flex items-center justify-center">
                                    <p className="text-20 font-thin text-white">Streaming</p>
                                </div>
                            </div>
                        </div>```

Answer 1

I tried which look similar just add gradient. you can adjust box shadow.

<div className="flex justify-center items-center min-h-screen bg-[#000000] bg-[url('/image.jpg')] bg-no-repeat bg-center">
            <div className="w-[250px] backdrop-blur-md shadow-card rounded-2xl">
                <div className="border-2 p-8 rounded-t-2xl shadow-card">
                    <Image
                        className="w-full h-auto rounded-2xl border border-white"
                        width={0}
                        height={0}
                        sizes="100vw"
                        src="/image.jpg"
                        alt="Image"
                    />
                </div>
                <div className="w-full rounded-b-2xl">
                    <p className="text-20 text-2xl text-center py-4 text-white">
                        Streaming
                    </p>
                </div>
            </div>
        </div>

// tailwind.config.ts
import type { Config } from "tailwindcss"

const config: Config = {
    content: [
        "./pages/**/*.{js,ts,jsx,tsx,mdx}",
        "./components/**/*.{js,ts,jsx,tsx,mdx}",
        "./app/**/*.{js,ts,jsx,tsx,mdx}",
    ],
    theme: {
        extend: {
            boxShadow: {
                card: "#BD00FF 0px 0px 20px 6px", // <--- adjust as need
            },
        },
    },
    plugins: [],
}
export default config

Output