How can I remove shadow from expansion panel (Vuetify)?

With Veutify 2 the following css does the job.

.v-expansion-panel::before {
   box-shadow: none !important;
}

You can set elevation-0 class on v-expansion-panel.

Here is working example: https://codepen.io/anon/pen/oKjRpm?editors=1010

I'd rather avoid changing CSS, because it will remove all borders and shadows, on all expansion panels on all pages.


In Vuetify v.2 you can use the attribute flat in v-expansion-panels. Documented here: https://vuetifyjs.com/en/api/v-expansion-panels/#flat

<v-expansion-panels flat>
    <v-expansion-panel >
      <v-expansion-panel-header>
        header
      </v-expansion-panel-header>
      <v-expansion-panel-content>
        Content
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-expansion-panels>