+ 2

How to have glass effect background in html/css?

I want to achieve a block with glass effect background. It should be in css only.

html css html5 css3

14th Sep 2019, 10:12 AM

Ibrokhim Shokirov

10 Answers

+ 5

So you want to make something a little transparent? For that you can use css rgba background:rgba(0 , 0 , 0 , 0.5);

14th Sep 2019, 10:53 AM

🍇 Alex Tușinean 💜

+ 3

Maybe box-shadow:; ?

14th Sep 2019, 11:06 AM

🍇 Alex Tușinean 💜

+ 2

You can use blur effect

14th Sep 2019, 10:15 AM

N3SHOW

+ 2

Yes but it blurs the whole element.

14th Sep 2019, 10:16 AM

Ibrokhim Shokirov

+ 2

Use background:rgba(0, 0, 0, 0.5);

14th Sep 2019, 2:45 PM

Vinay Kadhi

+ 1

Use: background: rgba (the a stands for alpha which is the transparency) and say 0,0,0,0.5;

16th Sep 2019, 5:01 AM

ExampleWasTaken

That is good but can I somehow add a little reflection on it? Like it is reflecting the light?

14th Sep 2019, 11:03 AM

Ibrokhim Shokirov

https://images.app.goo.gl/LuA7qM9VjCQ7kZn69 something like this

14th Sep 2019, 11:30 AM

Ibrokhim Shokirov

https://images.app.goo.gl/LuA7qM9VjCQ7kZn69 i need something like this

14th Sep 2019, 3:26 PM

Ibrokhim Shokirov

- 2

<html> <head> <title>first page</title> </head> <body> <p>This is a paragraph. </p> <p>This is anoth <!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid black; width:200px; height:200px"></div>gvvg <img id="image" src="sample.jpg" draggable="true" ondragstart="drag(event)" width="150" height="50" alt="" /> </body> </html>

15th Sep 2019, 1:22 PM

Chinonso