How the Background Gradient Is Rendered for Avatars in Vue Color Avatar

The background gradient is rendered entirely with CSS SCSS radial gradients in a fixed-position container, not through JavaScript or Canvas manipulation.

The vue-color-avatar library generates beautiful avatar portraits with a distinctive soft pastel backdrop. Unlike typical implementations that might use HTML5 Canvas or JavaScript calculations, the background gradient effect is achieved through pure stylesheet definitions in the main application layout. This approach ensures hardware acceleration and zero runtime overhead per avatar instance.

Layout Structure in App.vue

In src/App.vue, the gradient is constructed using a fixed-position wrapper containing two empty <div> elements:

<div class="gradient-bg">
  <div class="gradient-top"></div>
  <div class="gradient-bottom"></div>
</div>

These elements render behind the avatar playground and fill the entire viewport. The markup appears at lines 67–70 of the main application file, creating a persistent background layer that remains fixed during scrolling.

SCSS Implementation Strategy

The visual effect relies on a reusable SCSS mixin that generates blurred radial gradients. Located in the same src/App.vue file (lines 361–398) within a @supports block, the implementation ensures graceful degradation on browsers without filter support.

The Gradient Mixin

The gradient-style mixin defines a radial gradient pattern that fades from semi-transparent to fully transparent:

@mixin gradient-style($color) {
  position: absolute;
  width: 100vh;
  height: 100vh;
  background-image: radial-gradient(
    rgba($color, 0.8) 20%,
    rgba($color, 0.6) 40%,
    rgba($color, 0.4) 60%,
    rgba($color, 0.2) 80%,
    transparent 100%
  );
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(4rem);
}

This mixin creates a circular gradient with a 4rem blur filter and 20% opacity, producing the characteristic soft glow.

Positioning and Layering

Two gradient instances are positioned diagonally to create an overlapping halo effect:

.gradient-top {
  @include gradient-style(var.$color-secondary);
  top: -50%;
  right: -20%;
}

.gradient-bottom {
  @include gradient-style(var.$color-accent);
  bottom: -50%;
  left: -20%;
}

The top gradient uses the secondary color and anchors to the upper-right quadrant, while the bottom gradient uses the accent color and anchors to the lower-left. This diagonal positioning ensures their circles overlap at the center of the viewport.

Color Palette Configuration

The actual hues are defined in src/styles/var.scss and imported into the gradient system:

$color-accent: hsl(241, 99%, 70%);
$color-secondary: hsl(186, 84%, 74%);

These HSL values provide the pastel purple and cyan tones visible behind avatars. The SCSS variables are referenced via the var namespace (e.g., var.$color-accent) when passed to the mixin in App.vue.

Separation from Avatar Rendering

The avatar component itself (src/components/VueColorAvatar.vue) does not participate in gradient rendering. Instead, it displays only the solid background color supplied by its Background widget (src/components/widgets/Background.vue). The page-level gradient lives entirely outside the avatar component hierarchy, sitting behind the container to provide a universal backdrop. This architectural separation means the gradient is computed once per page load rather than per avatar generation.

Reproducing the Gradient Effect

To implement this background gradient outside the vue-color-avatar project, use the following structure:

<div class="gradient-bg">
  <div class="gradient-top"></div>
  <div class="gradient-bottom"></div>
</div>

.gradient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  
  > div {
    position: absolute;
    width: 100vh;
    height: 100vh;
    border-radius: 50%;
    opacity: 0.2;
    filter: blur(4rem);
  }
}

.gradient-top {
  background-image: radial-gradient(
    hsla(186, 84%, 74%, 0.8) 20%,
    hsla(186, 84%, 74%, 0.6) 40%,
    hsla(186, 84%, 74%, 0.4) 60%,
    hsla(186, 84%, 74%, 0.2) 80%,
    transparent 100%
  );
  top: -50%;
  right: -20%;
}

.gradient-bottom {
  background-image: radial-gradient(
    hsla(241, 99%, 70%, 0.8) 20%,
    hsla(241, 99%, 70%, 0.6) 40%,
    hsla(241, 99%, 70%, 0.4) 60%,
    hsla(241, 99%, 70%, 0.2) 80%,
    transparent 100%
  );
  bottom: -50%;
  left: -20%;
}

Summary

• Pure CSS Approach: The gradient is implemented entirely in src/App.vue using SCSS, requiring no JavaScript or Canvas APIs.
• Radial Gradient Mixin: The gradient-style mixin generates blurred, semi-transparent circular gradients using color variables from src/styles/var.scss.
• Fixed Positioning: A full-viewport container with position: fixed ensures the background remains static behind all avatar interactions.
• Architectural Separation: The VueColorAvatar component handles only solid background colors, while the page-level gradient provides the decorative halo effect.
• Performance: Hardware-accelerated CSS filters and gradients provide smooth rendering at zero runtime cost per avatar instance.

Frequently Asked Questions

Does the avatar component render its own background gradient?

No. The VueColorAvatar component in src/components/VueColorAvatar.vue only renders the solid background color via the Background.vue widget. The gradient effect is provided by the parent application's layout in src/App.vue, which sits behind the avatar container.

Why use CSS instead of Canvas for the gradient?

The vue-color-avatar library uses CSS radial gradients because they are hardware-accelerated, scale perfectly on high-DPI displays, and incur no computational overhead during avatar generation. This separation allows the Canvas-based avatar rendering to focus entirely on drawing the character elements while CSS handles the ambient background.

How can I customize the gradient colors?

Modify the SCSS variables in src/styles/var.scss. The gradient uses $color-accent (default: purple) and $color-secondary (default: cyan). After changing these values, the gradient-style mixin in src/App.vue will automatically apply the new colors to the background layers.

Is the gradient responsive to different screen sizes?

Yes. The gradient layers use width: 100vh and height: 100vh with percentage-based positioning (e.g., top: -50%), allowing the circular gradients to scale proportionally with the viewport. The position: fixed container ensures the background covers the entire screen regardless of scroll position or device dimensions.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}