Is it possible to Inline an SVG in style.css for reuse, multiple times, as a background-image?

Essentially the footer on many pages of my websites, is 3 buttons. In style.css I've styled them with a background svg. This is problematic because I have multiple images at the top paused by class="lazyload" using <script src="../lazysizes.min.js" async=""></script>, so the browser is now prioritising loading 3 unimportant SVG images at the very bottom.

.button {
    background-repeat: no-repeat;background-position: center;background-size: contain}

.button{background-image:url("icon-values/gem.svg"), linear-gradient(to bottom right, silver, darkgrey)}
.button:hover {background-image:url("icon-values/gem.svg"), linear-gradient(to bottom right, #648DA2, #215c7a)}

I want to inline the svg code in style.css however you can see I use each svg twice, I use it again for the button:hover state. I don't want to bloat out my styles.css with duplicate svg code. Further I read that svgs aren't cached, so whenever the users goes to a new page it loads them again, and it may even load the svgs twice if the user hovers on any page - Good Lord!

I've tried Google, it has information on <use xlink=""/> but that's if you want to reuse an svg in the HTML body, there doesn't appear to be a way to inline SVG for reuse within style.css, or is there?

Thanks to G-Cyrillus comment on css vars I used this:

.buttonLeft{
background-repeat: no-repeat;background-position: center;background-size: contain;
--gem: url("data:image/svg+xml;base64,.....BLOB....");
background-image:var(--gem), linear-gradient(to bottom right, silver, darkgrey)}

.buttonLeft:hover {background-image:var(--gem), linear-gradient(to bottom right, #648DA2, #215c7a)}

It switches the background gradient on a button on hover, but doesn't bloat up the CSS with another background images for the hover state. PERFECT!

Solution

(from earlier comment)

You may use the css var() function to avoid repeating the same value and shorten the code .

https://developer.mozilla.org/en-US/docs/Web/CSS/--*

Property names that are prefixed with --, like --example-name, represent custom properties that contain a value that can be used in other declarations using the var() function.

https://developer.mozilla.org/en-US/docs/Web/CSS/var()

The var() CSS function can be used to insert the value of a custom property (sometimes called a "CSS variable") instead of any part of a value of another property.

example for a background : svg found at www . svgrepo . com

html {
  --svg: url(https://www.svgrepo.com/show/530401/table-of-contents.svg) no-repeat center;
  background: var(--svg) / 50%;
  filter : drop-shadow(0 0 5px);
}

body {
  margin: 0;
  height: 100vh;
  background: var(--svg) / 25%;
}

p {
  background: var(--svg) / 60%; 
  padding: 6em 3em;
  width:max-content
}

<p>
  some more bg here
</p>
<p style="background-color:silver;color:white">
  Any SVG will do.
</p>