title: Responsive frosted glass effect on card background
body: <p>I'm trying to make the background of this card to be frosted glass instead of white. From my google searches, this isn't something that's easy or straightforward to do. What's the best way I can make the card background a frosted glass effect so that the whole thing still stays responsive to vh and vw changes? I'm implementing this in ReactJS using the antd ui framework.</p>
  
  <p>An idea I had was to make the background of this card invisible and then have another card as the background of this card which would have the filter: blur() css property but I can't get the sizing to work and I haven't figured out how to stack one card on top of another.</p>
  
  <p><a href="https://i.stack.imgur.com/mmbuE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mmbuE.png" alt="enter image description here"></a></p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>&lt;div className="Login"&gt;
    &lt;Row&gt;
      &lt;Col xs={{ span: 0 }} sm={{ span: 2 }} md={{ span: 6 }} lg={{ span: 8 }} xl={{ span: 9 }}&gt;&lt;/Col&gt;
      &lt;Col sm={{ span: 20 }} md={{ span: 12 }} lg={{ span: 8 }} xl={{ span: 6 }}&gt;
        &lt;Card
        title={&lt;span className='title'&gt;&lt;Avatar  size='large' shape='square' style={{ marginRight: '5px' }}/&gt;title&lt;/span&gt;}
        bordered={false}
        tabList={tabList}
        onTabChange={(key) =&gt; { this.onTabChange(key, 'key'); }}
        style={{ marginTop: '17vh' }}
        &gt;
          {contentList[this.state.key]}  
        &lt;/Card&gt;
      &lt;/Col&gt;
      &lt;Col sm={{ span: 2 }} md={{ span: 6 }} lg={{ span: 8 }} xl={{ span: 9 }}&gt;&lt;/Col&gt;
    &lt;/Row&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>