How to create a gradient background for a Vuetify control?

Question

My project: Vue 3 w/ the Composition API, Typescript, and Vuetify.

I'm trying to set the background of a v-navigation-drawer control to a gradient, but whenever I set a custom class on the control, nothing changes.

This is an example of the class:

// main.css
.gradientBackground {
  color: linear-gradient(to bottom right, white, black);
}

Here is the navigation drawer:

// .vue file
<template>
  <div>
    <v-layout>
      <v-navigation-drawer
        expand-on-hover
        rail
        rail-width="72"
        class="gradientBackground "
      >
      ... bunch of stuff
      </v-navigation-drawer> 
    </v-layout>
  </div>
</template>

<script lang="ts" setup>

import '@/assets/main.css'

</script>

I've tried using a scoped style within the same file without any luck. I've only been able to directly change the color with a standard 6-digit hex value or by using the theme colors (primary, secondar, etc.) which are really just 6-digit hex values.

I've seen themes for purchase on Vuetify's store that has includes gradients, so I know it is possible. I'm just not sure how to implement it.

Ethan · Accepted Answer · 2025-04-02 17:22:25Z

-1

The solution was to set the background-image property and include !important

so the end result would be:

.gradientBackground {
  background-image: linear-gradient(to bottom right, white, black) !important;
}

answered Apr 2 at 17:22

Ethan

836 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ethan Apr 4 at 10:44

Not sure why a down vote was received.

Collectives™ on Stack Overflow

How to create a gradient background for a Vuetify control?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related