Backgrounds

The original Wallflower snippets plus new meshes, grain, retro grids and adaptive glows that follow the active preset. Each one is a CSS class, a Tailwind snippet and a React/Astro component.

Violet Corner

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] [background-size:6rem_4rem]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(circle_800px_at_100%_200px,#d5c5ff,transparent)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] [background-size:6rem_4rem]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(circle_800px_at_100%_200px,#d5c5ff,transparent)]"></div>
</div>

.wf-bg-violet-corner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px), linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
  background-size: 6rem 4rem;
}
.wf-bg-violet-corner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle 800px at 100% 200px, #d5c5ff, transparent);
}

Pink Haze

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(60%_120%_at_50%_50%,rgba(255,255,255,0)_0,rgba(252,205,238,0.5)_100%)]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(60%_120%_at_50%_50%,rgba(255,255,255,0)_0,rgba(252,205,238,0.5)_100%)]"></div>

.wf-bg-pink-haze {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: radial-gradient(60% 120% at 50% 50%, rgba(255, 255, 255, 0) 0, rgba(252, 205, 238, 0.5) 100%);
}

Sky Top

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(100%_50%_at_50%_0%,rgba(0,163,255,0.13)_0,rgba(0,163,255,0)_50%,rgba(0,163,255,0)_100%)]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(100%_50%_at_50%_0%,rgba(0,163,255,0.13)_0,rgba(0,163,255,0)_50%,rgba(0,163,255,0)_100%)]"></div>

.wf-bg-sky-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: radial-gradient(100% 50% at 50% 0%, rgba(0, 163, 255, 0.13) 0, rgba(0, 163, 255, 0) 50%, rgba(0, 163, 255, 0) 100%);
}

Lilac Orb

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div className="pointer-events-none absolute -z-10 [top:0] [right:0] [width:500px] [height:500px] [border-radius:9999px] [background:rgba(173,109,244,0.5)] [opacity:0.5] [filter:blur(80px)] [transform:translate(-30%,20%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div class="pointer-events-none absolute -z-10 [top:0] [right:0] [width:500px] [height:500px] [border-radius:9999px] [background:rgba(173,109,244,0.5)] [opacity:0.5] [filter:blur(80px)] [transform:translate(-30%,20%)]"></div>
</div>

.wf-bg-lilac-orb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
}
.wf-bg-lilac-orb::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 0;
  right: 0;
  width: 500px;
  height: 500px;
  border-radius: 9999px;
  background: rgba(173, 109, 244, 0.5);
  opacity: 0.5;
  filter: blur(80px);
  transform: translate(-30%, 20%);
}

Periwinkle Dawn

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>

.wf-bg-periwinkle-dawn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(120, 119, 198, 0.3), rgba(255, 255, 255, 0));
}

Violet Horizon

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background:radial-gradient(125%_125%_at_50%_10%,#fff_40%,#63e_100%)]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background:radial-gradient(125%_125%_at_50%_10%,#fff_40%,#63e_100%)]"></div>

.wf-bg-violet-horizon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(125% 125% at 50% 10%, #fff 40%, #63e 100%);
}

Mint Corner

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] [background-size:6rem_4rem]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(circle_800px_at_100%_200px,#90ee90,transparent)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] [background-size:6rem_4rem]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(circle_800px_at_100%_200px,#90ee90,transparent)]"></div>
</div>

.wf-bg-mint-corner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px), linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
  background-size: 6rem 4rem;
}
.wf-bg-mint-corner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle 800px at 100% 200px, #90ee90, transparent);
}

Mint Dawn

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(134,239,172,0.3),rgba(255,255,255,0))]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(134,239,172,0.3),rgba(255,255,255,0))]"></div>

.wf-bg-mint-dawn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(134, 239, 172, 0.3), rgba(255, 255, 255, 0));
}

Amber Horizon

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background:radial-gradient(125%_125%_at_50%_10%,#fff_40%,#ffa500_100%)]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background:radial-gradient(125%_125%_at_50%_10%,#fff_40%,#ffa500_100%)]"></div>

.wf-bg-amber-horizon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(125% 125% at 50% 10%, #fff 40%, #ffa500 100%);
}

Amber Orb

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div className="pointer-events-none absolute -z-10 [top:0] [right:0] [width:500px] [height:500px] [border-radius:9999px] [background:rgba(255,165,0,0.5)] [opacity:0.5] [filter:blur(80px)] [transform:translate(-30%,20%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div class="pointer-events-none absolute -z-10 [top:0] [right:0] [width:500px] [height:500px] [border-radius:9999px] [background:rgba(255,165,0,0.5)] [opacity:0.5] [filter:blur(80px)] [transform:translate(-30%,20%)]"></div>
</div>

.wf-bg-amber-orb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
}
.wf-bg-amber-orb::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 0;
  right: 0;
  width: 500px;
  height: 500px;
  border-radius: 9999px;
  background: rgba(255, 165, 0, 0.5);
  opacity: 0.5;
  filter: blur(80px);
  transform: translate(-30%, 20%);
}

Fuchsia Grid

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] [background-size:14px_24px]">
  <div className="pointer-events-none absolute -z-10 [top:0] [left:0] [right:0] [margin:auto] [width:310px] [height:310px] [border-radius:9999px] [background-color:#e879f9] [opacity:0.2] [filter:blur(100px)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] [background-size:14px_24px]">
  <div class="pointer-events-none absolute -z-10 [top:0] [left:0] [right:0] [margin:auto] [width:310px] [height:310px] [border-radius:9999px] [background-color:#e879f9] [opacity:0.2] [filter:blur(100px)]"></div>
</div>

.wf-bg-fuchsia-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: linear-gradient(to right, #8080800a 1px, transparent 1px), linear-gradient(to bottom, #8080800a 1px, transparent 1px);
  background-size: 14px 24px;
}
.wf-bg-fuchsia-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 310px;
  height: 310px;
  border-radius: 9999px;
  background-color: #e879f9;
  opacity: 0.2;
  filter: blur(100px);
}

Ice Spotlight Grid

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] [background-size:6rem_4rem]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(circle_500px_at_50%_200px,#c9ebff,transparent)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] [background-size:6rem_4rem]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(circle_500px_at_50%_200px,#c9ebff,transparent)]"></div>
</div>

.wf-bg-ice-spotlight-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px), linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
  background-size: 6rem 4rem;
}
.wf-bg-ice-spotlight-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle 500px at 50% 200px, #c9ebff, transparent);
}

Dots

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"></div>

.wf-bg-dots {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 16px 16px;
}

Dots Vignette

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
</div>

.wf-bg-dots-vignette {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
}
.wf-bg-dots-vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}

Fine Grid

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] [background-size:14px_24px]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] [background-size:14px_24px]"></div>

.wf-bg-fine-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: linear-gradient(to right, #8080800a 1px, transparent 1px), linear-gradient(to bottom, #8080800a 1px, transparent 1px);
  background-size: 14px 24px;
}

Wide Grid

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] [background-size:6rem_4rem]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] [background-size:6rem_4rem]"></div>

.wf-bg-wide-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: linear-gradient(to right, #f0f0f0 1px, transparent 1px), linear-gradient(to bottom, #f0f0f0 1px, transparent 1px);
  background-size: 6rem 4rem;
}

Grid Fade Top

light

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] [background-size:14px_24px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] [background-size:14px_24px] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
</div>

.wf-bg-grid-fade-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
}
.wf-bg-grid-fade-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, #4f4f4f2e 1px, transparent 1px), linear-gradient(to bottom, #4f4f4f2e 1px, transparent 1px);
  background-size: 14px 24px;
  mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
}

Violet Abyss

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background:radial-gradient(125%_125%_at_50%_10%,#000_40%,#63e_100%)]"></div>

.wf-bg-violet-abyss {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(125% 125% at 50% 10%, #000 40%, #63e 100%);
}

Periwinkle Night

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#0a0a0a] [background-image:radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#0a0a0a] [background-image:radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>

.wf-bg-periwinkle-night {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0a0a0a;
  background-image: radial-gradient(ellipse 80% 80% at 50% -20%, rgba(120, 119, 198, 0.3), rgba(255, 255, 255, 0));
}

Fuchsia Haze

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#171717]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-color:#e879f9] [opacity:0.2] [filter:blur(100px)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#171717]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-color:#e879f9] [opacity:0.2] [filter:blur(100px)]"></div>
</div>

.wf-bg-fuchsia-haze {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #171717;
}
.wf-bg-fuchsia-haze::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #e879f9;
  opacity: 0.2;
  filter: blur(100px);
}

Graphite Spotlight

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617] [background-image:radial-gradient(circle_500px_at_50%_200px,#3e3e3e,transparent)]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617] [background-image:radial-gradient(circle_500px_at_50%_200px,#3e3e3e,transparent)]"></div>

.wf-bg-graphite-spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #020617;
  background-image: radial-gradient(circle 500px at 50% 200px, #3e3e3e, transparent);
}

Magenta Twins

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617]">
  <div className="pointer-events-none absolute -z-10 [top:-10%] [left:-20%] [width:500px] [height:500px] [border-radius:9999px] [background-image:radial-gradient(circle_farthest-side,rgba(255,0,182,0.15),rgba(255,255,255,0))]"></div>
  <div className="pointer-events-none absolute -z-10 [top:-10%] [right:-20%] [width:500px] [height:500px] [border-radius:9999px] [background-image:radial-gradient(circle_farthest-side,rgba(255,0,182,0.15),rgba(255,255,255,0))]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617]">
  <div class="pointer-events-none absolute -z-10 [top:-10%] [left:-20%] [width:500px] [height:500px] [border-radius:9999px] [background-image:radial-gradient(circle_farthest-side,rgba(255,0,182,0.15),rgba(255,255,255,0))]"></div>
  <div class="pointer-events-none absolute -z-10 [top:-10%] [right:-20%] [width:500px] [height:500px] [border-radius:9999px] [background-image:radial-gradient(circle_farthest-side,rgba(255,0,182,0.15),rgba(255,255,255,0))]"></div>
</div>

.wf-bg-magenta-twins {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #020617;
}
.wf-bg-magenta-twins::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -10%;
  left: -20%;
  width: 500px;
  height: 500px;
  border-radius: 9999px;
  background-image: radial-gradient(circle farthest-side, rgba(255, 0, 182, 0.15), rgba(255, 255, 255, 0));
}
.wf-bg-magenta-twins::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -10%;
  right: -20%;
  width: 500px;
  height: 500px;
  border-radius: 9999px;
  background-image: radial-gradient(circle farthest-side, rgba(255, 0, 182, 0.15), rgba(255, 255, 255, 0));
}

Forest Spotlight

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617] [background-image:radial-gradient(circle_500px_at_50%_200px,#1a4731,transparent)]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617] [background-image:radial-gradient(circle_500px_at_50%_200px,#1a4731,transparent)]"></div>

.wf-bg-forest-spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #020617;
  background-image: radial-gradient(circle 500px at 50% 200px, #1a4731, transparent);
}

Amber Twins

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617]">
  <div className="pointer-events-none absolute -z-10 [top:-10%] [left:-20%] [width:500px] [height:500px] [border-radius:9999px] [background-image:radial-gradient(circle_farthest-side,rgba(255,165,0,0.15),rgba(255,255,255,0))]"></div>
  <div className="pointer-events-none absolute -z-10 [top:-10%] [right:-20%] [width:500px] [height:500px] [border-radius:9999px] [background-image:radial-gradient(circle_farthest-side,rgba(255,165,0,0.15),rgba(255,255,255,0))]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617]">
  <div class="pointer-events-none absolute -z-10 [top:-10%] [left:-20%] [width:500px] [height:500px] [border-radius:9999px] [background-image:radial-gradient(circle_farthest-side,rgba(255,165,0,0.15),rgba(255,255,255,0))]"></div>
  <div class="pointer-events-none absolute -z-10 [top:-10%] [right:-20%] [width:500px] [height:500px] [border-radius:9999px] [background-image:radial-gradient(circle_farthest-side,rgba(255,165,0,0.15),rgba(255,255,255,0))]"></div>
</div>

.wf-bg-amber-twins {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #020617;
}
.wf-bg-amber-twins::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -10%;
  left: -20%;
  width: 500px;
  height: 500px;
  border-radius: 9999px;
  background-image: radial-gradient(circle farthest-side, rgba(255, 165, 0, 0.15), rgba(255, 255, 255, 0));
}
.wf-bg-amber-twins::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -10%;
  right: -20%;
  width: 500px;
  height: 500px;
  border-radius: 9999px;
  background-image: radial-gradient(circle farthest-side, rgba(255, 165, 0, 0.15), rgba(255, 255, 255, 0));
}

Dark Grid Glow

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#000000]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] [background-size:14px_24px]"></div>
  <div className="pointer-events-none absolute -z-10 [top:-10%] [left:0] [right:0] [margin:0_auto] [width:1000px] [height:1000px] [border-radius:9999px] [background-image:radial-gradient(circle_400px_at_50%_300px,#fbfbfb36,#000)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#000000]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] [background-size:14px_24px]"></div>
  <div class="pointer-events-none absolute -z-10 [top:-10%] [left:0] [right:0] [margin:0_auto] [width:1000px] [height:1000px] [border-radius:9999px] [background-image:radial-gradient(circle_400px_at_50%_300px,#fbfbfb36,#000)]"></div>
</div>

.wf-bg-dark-grid-glow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #000000;
}
.wf-bg-dark-grid-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, #4f4f4f2e 1px, transparent 1px), linear-gradient(to bottom, #8080800a 1px, transparent 1px);
  background-size: 14px 24px;
}
.wf-bg-dark-grid-glow::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -10%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 1000px;
  height: 1000px;
  border-radius: 9999px;
  background-image: radial-gradient(circle 400px at 50% 300px, #fbfbfb36, #000);
}

Night Dots

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#000000] [background-image:radial-gradient(#ffffff33_1px,#00091d_1px)] [background-size:20px_20px]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#000000] [background-image:radial-gradient(#ffffff33_1px,#00091d_1px)] [background-size:20px_20px]"></div>

.wf-bg-night-dots {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #000000;
  background-image: radial-gradient(#ffffff33 1px, #00091d 1px);
  background-size: 20px 20px;
}

Slate Grid

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617] [background-image:linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] [background-size:14px_24px]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617] [background-image:linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] [background-size:14px_24px]"></div>

.wf-bg-slate-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #020617;
  background-image: linear-gradient(to right, #4f4f4f2e 1px, transparent 1px), linear-gradient(to bottom, #4f4f4f2e 1px, transparent 1px);
  background-size: 14px 24px;
}

Slate Grid Fade

dark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] [background-size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#020617]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] [background-size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]"></div>
</div>

.wf-bg-slate-grid-fade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #020617;
}
.wf-bg-slate-grid-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, #4f4f4f2e 1px, transparent 1px), linear-gradient(to bottom, #4f4f4f2e 1px, transparent 1px);
  background-size: 14px 24px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 100%);
}

Aurora

newadaptive

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:var(--background)]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(40%_50%_at_15%_15%,color-mix(in_oklab,var(--brand)_45%,transparent),transparent_70%),radial-gradient(40%_45%_at_85%_10%,color-mix(in_oklab,var(--brand-2)_40%,transparent),transparent_70%),radial-gradient(55%_50%_at_50%_100%,color-mix(in_oklab,var(--chart-3)_25%,transparent),transparent_70%)] [filter:blur(40px)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:var(--background)]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(40%_50%_at_15%_15%,color-mix(in_oklab,var(--brand)_45%,transparent),transparent_70%),radial-gradient(40%_45%_at_85%_10%,color-mix(in_oklab,var(--brand-2)_40%,transparent),transparent_70%),radial-gradient(55%_50%_at_50%_100%,color-mix(in_oklab,var(--chart-3)_25%,transparent),transparent_70%)] [filter:blur(40px)]"></div>
</div>

.wf-bg-aurora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--background);
}
.wf-bg-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(40% 50% at 15% 15%, color-mix(in oklab, var(--brand) 45%, transparent), transparent 70%), radial-gradient(40% 45% at 85% 10%, color-mix(in oklab, var(--brand-2) 40%, transparent), transparent 70%), radial-gradient(55% 50% at 50% 100%, color-mix(in oklab, var(--chart-3) 25%, transparent), transparent 70%);
  filter: blur(40px);
}

Brand Spotlight

newadaptive

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:var(--background)] [background-image:radial-gradient(ellipse_70%_55%_at_50%_-10%,color-mix(in_oklab,var(--brand)_30%,transparent),transparent_70%)]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:linear-gradient(to_right,color-mix(in_oklab,var(--foreground)_7%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_oklab,var(--foreground)_7%,transparent)_1px,transparent_1px)] [background-size:48px_48px] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,#000_40%,transparent_100%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:var(--background)] [background-image:radial-gradient(ellipse_70%_55%_at_50%_-10%,color-mix(in_oklab,var(--brand)_30%,transparent),transparent_70%)]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:linear-gradient(to_right,color-mix(in_oklab,var(--foreground)_7%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_oklab,var(--foreground)_7%,transparent)_1px,transparent_1px)] [background-size:48px_48px] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,#000_40%,transparent_100%)]"></div>
</div>

.wf-bg-brand-spotlight {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--background);
  background-image: radial-gradient(ellipse 70% 55% at 50% -10%, color-mix(in oklab, var(--brand) 30%, transparent), transparent 70%);
}
.wf-bg-brand-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, color-mix(in oklab, var(--foreground) 7%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 7%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 100%);
}

Halftone

newadaptive

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:var(--background)]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(color-mix(in_oklab,var(--foreground)_22%,transparent)_1.5px,transparent_1.5px)] [background-size:14px_14px] [mask-image:linear-gradient(225deg,#000,transparent_65%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:var(--background)]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(color-mix(in_oklab,var(--foreground)_22%,transparent)_1.5px,transparent_1.5px)] [background-size:14px_14px] [mask-image:linear-gradient(225deg,#000,transparent_65%)]"></div>
</div>

.wf-bg-halftone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--background);
}
.wf-bg-halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in oklab, var(--foreground) 22%, transparent) 1.5px, transparent 1.5px);
  background-size: 14px 14px;
  mask-image: linear-gradient(225deg, #000, transparent 65%);
}

Brand Grain

newadaptive

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:var(--background)] [background-image:linear-gradient(160deg,color-mix(in_oklab,var(--brand)_22%,transparent),transparent_45%,color-mix(in_oklab,var(--brand-2)_20%,transparent))]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E')] [opacity:0.22] [mix-blend-mode:overlay]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:var(--background)] [background-image:linear-gradient(160deg,color-mix(in_oklab,var(--brand)_22%,transparent),transparent_45%,color-mix(in_oklab,var(--brand-2)_20%,transparent))]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E')] [opacity:0.22] [mix-blend-mode:overlay]"></div>
</div>

.wf-bg-brand-grain {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--background);
  background-image: linear-gradient(160deg, color-mix(in oklab, var(--brand) 22%, transparent), transparent 45%, color-mix(in oklab, var(--brand-2) 20%, transparent));
}
.wf-bg-brand-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E');
  opacity: 0.22;
  mix-blend-mode: overlay;
}

Pastel Mesh

newlight

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(at_0%_0%,#ffd6e8_0,transparent_50%),radial-gradient(at_100%_0%,#d6e4ff_0,transparent_50%),radial-gradient(at_100%_100%,#fff1c9_0,transparent_50%),radial-gradient(at_0%_100%,#d9fbe8_0,transparent_50%)]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:radial-gradient(at_0%_0%,#ffd6e8_0,transparent_50%),radial-gradient(at_100%_0%,#d6e4ff_0,transparent_50%),radial-gradient(at_100%_100%,#fff1c9_0,transparent_50%),radial-gradient(at_0%_100%,#d9fbe8_0,transparent_50%)]"></div>

.wf-bg-pastel-mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: radial-gradient(at 0% 0%, #ffd6e8 0, transparent 50%), radial-gradient(at 100% 0%, #d6e4ff 0, transparent 50%), radial-gradient(at 100% 100%, #fff1c9 0, transparent 50%), radial-gradient(at 0% 100%, #d9fbe8 0, transparent 50%);
}

Warm Paper

newlight

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#f6f1e7]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E')] [opacity:0.35] [mix-blend-mode:multiply]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#f6f1e7]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E')] [opacity:0.35] [mix-blend-mode:multiply]"></div>
</div>

.wf-bg-warm-paper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #f6f1e7;
}
.wf-bg-warm-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E');
  opacity: 0.35;
  mix-blend-mode: multiply;
}

Graph Paper

newlight

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#fbfdff] [background-image:linear-gradient(to_right,rgba(0,108,181,0.16)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,108,181,0.16)_1px,transparent_1px),linear-gradient(to_right,rgba(0,108,181,0.06)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,108,181,0.06)_1px,transparent_1px)] [background-size:80px_80px,80px_80px,16px_16px,16px_16px]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#fbfdff] [background-image:linear-gradient(to_right,rgba(0,108,181,0.16)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,108,181,0.16)_1px,transparent_1px),linear-gradient(to_right,rgba(0,108,181,0.06)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,108,181,0.06)_1px,transparent_1px)] [background-size:80px_80px,80px_80px,16px_16px,16px_16px]"></div>

.wf-bg-graph-paper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #fbfdff;
  background-image: linear-gradient(to right, rgba(0, 108, 181, 0.16) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 108, 181, 0.16) 1px, transparent 1px), linear-gradient(to right, rgba(0, 108, 181, 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(0, 108, 181, 0.06) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}

Pinstripe

newlight

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:repeating-linear-gradient(45deg,rgba(0,0,0,0.05)_0_1px,transparent_1px_12px)] [mask-image:radial-gradient(ellipse_80%_70%_at_50%_30%,#000_30%,transparent_100%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:repeating-linear-gradient(45deg,rgba(0,0,0,0.05)_0_1px,transparent_1px_12px)] [mask-image:radial-gradient(ellipse_80%_70%_at_50%_30%,#000_30%,transparent_100%)]"></div>
</div>

.wf-bg-pinstripe {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
}
.wf-bg-pinstripe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 12px);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 100%);
}

Plus Field

newlight

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22none%22%20stroke%3D%22%23a1a1aa%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.25%22%3E%3Cpath%20d%3D%22M16%2011v10M11%2016h10%22%2F%3E%3C%2Fsvg%3E')] [background-size:32px_32px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_40%,#000_40%,transparent_100%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22none%22%20stroke%3D%22%23a1a1aa%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.25%22%3E%3Cpath%20d%3D%22M16%2011v10M11%2016h10%22%2F%3E%3C%2Fsvg%3E')] [background-size:32px_32px] [mask-image:radial-gradient(ellipse_75%_65%_at_50%_40%,#000_40%,transparent_100%)]"></div>
</div>

.wf-bg-plus-field {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
}
.wf-bg-plus-field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22none%22%20stroke%3D%22%23a1a1aa%22%20stroke-opacity%3D%220.45%22%20stroke-width%3D%221.25%22%3E%3Cpath%20d%3D%22M16%2011v10M11%2016h10%22%2F%3E%3C%2Fsvg%3E');
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 40%, transparent 100%);
}

Soft Checker

newlight

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:conic-gradient(#f4f4f5_90deg,#ffffff_90deg_180deg,#f4f4f5_180deg_270deg,#ffffff_270deg)] [background-size:32px_32px]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#ffffff] [background-image:conic-gradient(#f4f4f5_90deg,#ffffff_90deg_180deg,#f4f4f5_180deg_270deg,#ffffff_270deg)] [background-size:32px_32px]"></div>

.wf-bg-soft-checker {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #ffffff;
  background-image: conic-gradient(#f4f4f5 90deg, #ffffff 90deg 180deg, #f4f4f5 180deg 270deg, #ffffff 270deg);
  background-size: 32px 32px;
}

Peach Fade

newlight

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-image:linear-gradient(180deg,#fff1e6_0%,#ffe4ec_40%,#ffffff_100%)]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-image:linear-gradient(180deg,#fff1e6_0%,#ffe4ec_40%,#ffffff_100%)]"></div>

.wf-bg-peach-fade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(180deg, #fff1e6 0%, #ffe4ec 40%, #ffffff 100%);
}

Night Mesh

newdark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#09090b] [background-image:radial-gradient(at_0%_0%,rgba(187,8,111,0.35)_0,transparent_50%),radial-gradient(at_100%_0%,rgba(0,108,181,0.35)_0,transparent_50%),radial-gradient(at_100%_100%,rgba(109,72,209,0.3)_0,transparent_50%),radial-gradient(at_0%_100%,rgba(0,120,121,0.3)_0,transparent_50%)]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#09090b] [background-image:radial-gradient(at_0%_0%,rgba(187,8,111,0.35)_0,transparent_50%),radial-gradient(at_100%_0%,rgba(0,108,181,0.35)_0,transparent_50%),radial-gradient(at_100%_100%,rgba(109,72,209,0.3)_0,transparent_50%),radial-gradient(at_0%_100%,rgba(0,120,121,0.3)_0,transparent_50%)]"></div>

.wf-bg-night-mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #09090b;
  background-image: radial-gradient(at 0% 0%, rgba(187, 8, 111, 0.35) 0, transparent 50%), radial-gradient(at 100% 0%, rgba(0, 108, 181, 0.35) 0, transparent 50%), radial-gradient(at 100% 100%, rgba(109, 72, 209, 0.3) 0, transparent 50%), radial-gradient(at 0% 100%, rgba(0, 120, 121, 0.3) 0, transparent 50%);
}

Conic Beam

newdark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#050505]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:conic-gradient(from_180deg_at_50%_-5%,transparent_155deg,rgba(255,255,255,0.14)_180deg,transparent_205deg)] [mask-image:linear-gradient(to_bottom,#000_20%,transparent_85%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#050505]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:conic-gradient(from_180deg_at_50%_-5%,transparent_155deg,rgba(255,255,255,0.14)_180deg,transparent_205deg)] [mask-image:linear-gradient(to_bottom,#000_20%,transparent_85%)]"></div>
</div>

.wf-bg-conic-beam {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #050505;
}
.wf-bg-conic-beam::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: conic-gradient(from 180deg at 50% -5%, transparent 155deg, rgba(255, 255, 255, 0.14) 180deg, transparent 205deg);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 85%);
}

Dot Fade

newdark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#09090b]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(rgba(255,255,255,0.2)_1px,transparent_1px)] [background-size:22px_22px] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,#000_50%,transparent_100%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#09090b]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:radial-gradient(rgba(255,255,255,0.2)_1px,transparent_1px)] [background-size:22px_22px] [mask-image:radial-gradient(ellipse_70%_60%_at_50%_0%,#000_50%,transparent_100%)]"></div>
</div>

.wf-bg-dot-fade {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #09090b;
}
.wf-bg-dot-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 50%, transparent 100%);
}

Blueprint

newdark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#0b2a4a] [background-image:linear-gradient(to_right,rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(to_right,rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.05)_1px,transparent_1px)] [background-size:80px_80px,80px_80px,16px_16px,16px_16px]"></div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#0b2a4a] [background-image:linear-gradient(to_right,rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.12)_1px,transparent_1px),linear-gradient(to_right,rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.05)_1px,transparent_1px)] [background-size:80px_80px,80px_80px,16px_16px,16px_16px]"></div>

.wf-bg-blueprint {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b2a4a;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.12) 1px, transparent 1px), linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}

Retro Grid

newdark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-image:linear-gradient(180deg,#0b0218_0%,#2a0845_60%,#4a0d4f_100%)]">
  <div className="pointer-events-none absolute -z-10 [left:-50%] [right:-50%] [bottom:0] [height:60%] [background-image:linear-gradient(to_right,rgba(255,95,162,0.55)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,95,162,0.55)_1px,transparent_1px)] [background-size:48px_48px] [transform:perspective(320px)_rotateX(60deg)] [transform-origin:bottom] [mask-image:linear-gradient(to_top,#000_30%,transparent_90%)]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-image:linear-gradient(180deg,#0b0218_0%,#2a0845_60%,#4a0d4f_100%)]">
  <div class="pointer-events-none absolute -z-10 [left:-50%] [right:-50%] [bottom:0] [height:60%] [background-image:linear-gradient(to_right,rgba(255,95,162,0.55)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,95,162,0.55)_1px,transparent_1px)] [background-size:48px_48px] [transform:perspective(320px)_rotateX(60deg)] [transform-origin:bottom] [mask-image:linear-gradient(to_top,#000_30%,transparent_90%)]"></div>
</div>

.wf-bg-retro-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: linear-gradient(180deg, #0b0218 0%, #2a0845 60%, #4a0d4f 100%);
}
.wf-bg-retro-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 60%;
  background-image: linear-gradient(to right, rgba(255, 95, 162, 0.55) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 95, 162, 0.55) 1px, transparent 1px);
  background-size: 48px 48px;
  transform: perspective(320px) rotateX(60deg);
  transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 30%, transparent 90%);
}

Ember Grain

newdark

<div className="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#0c0a09] [background-image:radial-gradient(ellipse_60%_50%_at_50%_110%,rgba(233,73,55,0.4),transparent_70%)]">
  <div className="pointer-events-none absolute -z-10 inset-0 [background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E')] [opacity:0.18] [mix-blend-mode:overlay]"></div>
</div>

            <div class="absolute inset-0 -z-10 isolate overflow-hidden [background-color:#0c0a09] [background-image:radial-gradient(ellipse_60%_50%_at_50%_110%,rgba(233,73,55,0.4),transparent_70%)]">
  <div class="pointer-events-none absolute -z-10 inset-0 [background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E')] [opacity:0.18] [mix-blend-mode:overlay]"></div>
</div>

.wf-bg-ember-grain {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0c0a09;
  background-image: radial-gradient(ellipse 60% 50% at 50% 110%, rgba(233, 73, 55, 0.4), transparent 70%);
}
.wf-bg-ember-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E');
  opacity: 0.18;
  mix-blend-mode: overlay;
}

Using a background

Backgrounds sit behind content (z-index -1). Fill a section, or pin one behind the whole page with wf-bg-fixed.

HTML / Astro (with wallflower-ui/css)

<!-- whole page -->
<div class="wf-bg-aurora wf-bg-fixed" aria-hidden="true"></div>

<!-- one section -->
<section class="relative isolate">
  <div class="wf-bg-dot-fade wf-bg-fill" aria-hidden="true"></div>
  …
</section>

React / Next.js

import { Background } from "wallflower-ui/react/background";

<Background id="night-mesh" fixed />

// Astro
import Background from "wallflower-ui/astro/Background.astro";
<Background id="night-mesh" fixed />

The JSX and HTML buttons copy self-contained Tailwind snippets that need no Wallflower CSS (place it inside a relativeparent). Adaptive backgrounds read--brand, --brand-2 and--background, so they change with the preset and dark mode.