@arolariu/components/dist/components/ui/hole-background_module.css

🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

.root-OfHeSV {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.root-OfHeSV:before {
  content: "";
  background: radial-gradient(at 50% 55%, #0000 10%, #fff 50%);
  width: 140%;
  height: 140%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.dark .root-OfHeSV:before {
  background: radial-gradient(at 50% 55%, #0000 10%, #000 50%);
}

[data-theme=dark] .root-OfHeSV:before {
  background: radial-gradient(at 50% 55%, #0000 10%, #000 50%);
}

.root-OfHeSV:after {
  content: "";
  mix-blend-mode: overlay;
  z-index: 5;
  background: radial-gradient(at 50% 75%, #a900ff 20%, #0000 75%);
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.canvas-tTs4tg, .root-OfHeSV:after {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
}

.canvas-tTs4tg {
  opacity: .1;
  inset: 0;
}

:is(.dark .canvas-tTs4tg, [data-theme=dark] .canvas-tTs4tg) {
  opacity: .2;
}

.glow-nZsD4t {
  filter: blur(48px);
  mix-blend-mode: plus-darker;
  opacity: .75;
  z-index: 3;
  background: linear-gradient(20deg, #00f8f1, #ffbd1e40 16.5%, #fe848f 33%, #fe848f40 49.5%, #00f8f1 66%, #00f8f180 85.5%, #ffbd1e) 0 100% / 100% 200%;
  border-bottom-right-radius: 9999px;
  border-bottom-left-radius: 9999px;
  width: 30%;
  height: 140%;
  position: absolute;
  top: -71.5%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

:is(.dark .glow-nZsD4t, [data-theme=dark] .glow-nZsD4t) {
  mix-blend-mode: plus-lighter;
  background: linear-gradient(20deg, #00f8f1, #ffbd1e20 16.5%, #fe848f 33%, #fe848f20 49.5%, #00f8f1 66%, #00f8f160 85.5%, #ffbd1e);
}

.scanlines-JVTosf {
  mix-blend-mode: overlay;
  opacity: .5;
  z-index: 7;
  background: repeating-linear-gradient(#0000, #0000 1px, #fff 0 2px);
  position: absolute;
  inset: 0;
}


/*# sourceMappingURL=hole-background_module.css.map */