How to achieve this "semi transparent" effect using CSS?

I am trying to clone this website as a side project.

And I have no idea, in the form section, how to make those semi transparent bubbles in the text field.

Here is my codepen

Could someone help me?

Hey there,

I set up a little pen of how I might approach this. I’m wondering if anyone can find a simpler way.


Nevermind guys… I found out how to achieve that.

Add background:rgba(255,255,255,.5) and border-radius:5px to the certain div you wanna decorate.

Hey thanks for the reply.

I was trying to make a certain div have a transparent effect,.
You can see my solution. I believe it is better.

Hmm, but won’t that make the text transparent as well?

er… no? check out my codepen.

the text was not decorated at all.

Oh sweet, that works nicely

1 Like