[Feature Request] Custom Backdrop strength ( Modal )

[Vibrant275]

Is your feature request related to a problem? Please describe.

The current blur strength in Modal Backdrop applied in the UI design is excessive, leading to an unattractive appearance. This issue detracts from the overall user experience, making it difficult for users to focus on important content.

Describe the solution you'd like

I would like to propose a modification to allow for customizable blur strength settings for the backdrop ( Modal ). Also please add an option to disable the outline glow effect in Modal.

Describe alternatives you've considered

Till now i have worked on any alternative. If this feature gets added, it would be really helpful.

Screenshots or Videos

[linear[bot]]

ENG-1422 [Feature Request] Custom Backdrop strength ( Modal )

[wingkwong]

I would like to propose a modification to allow for customizable blur strength settings for the backdrop ( Modal ).

You can customize via classNames.backdrop.

Also please add an option to disable the outline glow effect in Modal.

I don't see that effect. Which examples in docs are you referring to?

[Vibrant275]

From classname.backdrop we can set backdrop-opacity but that's give a different effect. Adding 'blur' via tailwind in classnames, but it gives a unexpected results.

There's a little glow effect when setting backdrop to blur please zoom and look closley in the modal edges.

[shaman-004]

hey can i work on this issue @wingkwong

[shaman-004]

I need more info on where i can find this code could u please help me on this! ,please provide a code link @wingkwong

[MarvinCorro]

@wingkwong I started to look into this last night and I cannot determine what is the right way to fix this? We can either add blur strengths to the variants so right now we have something like

blur: {backdrop: "backdrop-blur-md backdrop-saturate-150 bg-overlay/30",} from: packages/core/theme/src/components/modal.ts

so rather than that we can do something like

blur-sm: {....}, blur-md: {...}, blur-lg: {...}

but this changes the current API and could break a lot of existing code. Rather if we look at the tailwind-variant docs we see we can overwrite variants (https://www.tailwind-variants.org/docs/overriding-styles#overriding-styles-on-a-single-component), which I believe is already being done (not 100% sure but it looks like its done here)

https://github.com/nextui-org/nextui/blob/8a33eabb2583202fcc8fbc33e8f2ed23bb45f1a4/packages/components/modal/src/use-modal.ts#L84

So rather this issue should be treated as a bug not a feature request?

@Vibrant275 can you please show how you try to overwrite the current overlay, using the variants overwrite you should be able to overwrite the current blur styles.

Just started looking into this last night please correct me on any facts I may have gotten wrong