How to ONLY blur color of table in CSS?

Question

I have table with background gray trqnspert 50%.
I want to blue ONLY the background.
Is it possible and how?

Answer 1

Here is another attempt lol
https://code.sololearn.com/WaWoZi8MY17T/?ref=app
Best of Luck

Answer 2

Perhaps this may help if you need changes let me know.
https://code.sololearn.com/WEOZkz2Capdg/?ref=app

Answer 3

Cлaвeн Ђервида it's not blurring much for me either I'm trying other solutions but not there yet.

Answer 4

Cлaвeн Ђервида probably I just positioned it quickly close to where it would be useful.

Answer 5

Cлaвeн Ђервида

Bobbie's demo #2 is close enough for you😉

Particularly she had all vendor prefixes :
-webkit-filter: blur(13px);
-moz-filter: blur(13px);
-o-filter: blur(13px);
-ms-filter: blur(13px);
filter: blur(13px);
to ensure compatibility.

You'll need to walk the last mile yourself by fine tuning width and height of .blur after you fix the content of your table. Yes you can 😉

She coded two demo exclusively for your Q&A voluntarily, I think she deserved a big thank you😉

Answer 6

Cutting the picture and showing only a portion
https://www.w3schools.com/cssref/pr_pos_clip.asp
Let me find a demo for you

Answer 7

Frosted Glass Effect
https://code.sololearn.com/WMY6705H3KN5/?ref=app

Answer 8

It is on my PC. I will soon copy to SL!

Answer 9

https://code.sololearn.com/W183FLremOgo/?ref=app

Answer 10

I tried add
filter:blur(1px)
to table
but the table content got blurred instead of the background behind content

Best way I can think of is adding opacity of background color
https://code.sololearn.com/WXByF6h5DYoD/?ref=app

Answer 11

It blur all background.
I think to blur only the part of bg where is table

Answer 12

It blur all background.
I think to blur only the part of bg where is table.
Something like on Windows 10 effect.

Answer 13

Maybe after the position of table is fixed, then use absolute positioning to place an clipped part of the background beneath the table and then blur that?

Answer 14

Do you think on this?
Create another object with same size and position and blur that. (table bg is transparent 100%)
?

Answer 15

Table bg still can have opacity 0.39
The image is clipped. And placed beneath the table. You know clipping?

Answer 16

No enough

Answer 17

Thank You.

Answer 18

https://www.sololearn.com/Discuss/1549296/?ref=app

This demo is good for circle clip.
You need rectangle clip.
clip: rect (top, right, bottom, left)

This method is "brutal force", Not flexible, you may need to adjust clip following every change in content. Otherwise make your table very spacy, and no need change table size.

Answer 19

Gordon I don't see differences between outputs

Answer 20

I am not sure I understand what you mean by "differences between outputs"