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

> Discover how Vue Color Avatar renders background gradients using CSS SCSS radial gradients for stunning avatars. Learn the rendering technique without JavaScript or Canvas.

- Repository: [LeoKu/vue-color-avatar](https://github.com/codennnn/vue-color-avatar)
- Tags: internals
- Published: 2026-02-27

---

**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`](https://github.com/codennnn/vue-color-avatar/blob/main/src/App.vue), the gradient is constructed using a fixed-position wrapper containing two empty `<div>` elements:

```html
<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`](https://github.com/codennnn/vue-color-avatar/blob/main/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:

```scss
@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:

```scss
.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`](https://github.com/codennnn/vue-color-avatar/blob/main/src/styles/var.scss) and imported into the gradient system:

```scss
$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`](https://github.com/codennnn/vue-color-avatar/blob/main/App.vue).

## Separation from Avatar Rendering

The avatar component itself ([`src/components/VueColorAvatar.vue`](https://github.com/codennnn/vue-color-avatar/blob/main/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`](https://github.com/codennnn/vue-color-avatar/blob/main/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:

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

```

```scss
.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`](https://github.com/codennnn/vue-color-avatar/blob/main/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`](https://github.com/codennnn/vue-color-avatar/blob/main/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`](https://github.com/codennnn/vue-color-avatar/blob/main/src/components/VueColorAvatar.vue) only renders the solid background color via the [`Background.vue`](https://github.com/codennnn/vue-color-avatar/blob/main/Background.vue) widget. The gradient effect is provided by the parent application's layout in [`src/App.vue`](https://github.com/codennnn/vue-color-avatar/blob/main/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`](https://github.com/codennnn/vue-color-avatar/blob/main/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`](https://github.com/codennnn/vue-color-avatar/blob/main/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.