Vuetify.js - Adding blur and transparent styles to v-card

Question

I'm trying to add blur styling to this vuetify.js "v-card", I got to add the blur, but it also blur its content, is there a way to blur the card and not the contents? Also, I'm very new to custom css, can I make a style to make the v-card background transparent, and blurry?

new Vue({
  el: '#app',
})

//Remove console info from Vue
Vue.config.devtools = false
Vue.config.productionTip = false

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">

<v-card id="app" color="rgb(0, 0, 0, 0.2)" width="354" height="100%">
  <v-layout justify-space-between column fill-height>
    <v-flex>
      <v-card-title primary-title>
        <h3 class="headline ma-1"></h3>
      </v-card-title>
      <v-card-text>
        <v-flex>testing</v-flex>
      </v-card-text>
    </v-flex>
    <v-flex style='height:100px'>
      <v-layout align-end row fill-height>
        <v-flex>
          <v-divider></v-divider>
          <v-card-actions>
            <v-btn color="blue darken-3" block>View Examples</v-btn>
          </v-card-actions>
        </v-flex>
      </v-layout>
    </v-flex>
  </v-layout>
</v-card>

edit: i got the snippet, and got the transparency for the background, but I don't know how you will be able to get the blur ONLY for the v-card... (blur style is working)