how to add gradient color for background ?

[SheikhElMoctarG]

when I tried to change background color to gradient color using css, I failed, and I can use one color only, what is the solution ?

[Joepocalyptic]

Apologies for the late response! Have you tried setting the background color of the particles to transparent and targeting a parent container with a background: linear-gradient()?

If you can't figure it out on your own, a code snippet of your current workaround(s) would be greatly appreciated.

[SheikhElMoctarG]

No problem bro, but there is another problem, It's I cannot add any element in nuxt-particle element. look at https://stackoverflow.com/questions/77722032/how-to-add-elments-in-particles-js-nuxt-3

[Joepocalyptic]

That is intentional behavior; the NuxtParticles component does not expose a Vue slot, as this is not the intended usage pattern of the API. Instead, you should create two separate elements in a shared container, set the parent as position: relative, set the particles as position: absolute with inset: 0, and then give the other element a higher z-index.

Minimal example (though this might only work if you set an explicit height on the container):

<template>
  <div class="relative">
    <NuxtParticles class="absolute inset-0" />
    <div class="z-10">
      <p>Sheikh El-Moktar</p>
      <Navbar />
    </div>
  </div>
</template>

[Joepocalyptic]

@SheikhElMoctarG Is this issue resolved?