Backgrounds, Borders, and Visual Effects

CSS backgrounds and visual effects — gradients, filters, blend modes, and masks — give you powerful tools to create rich visuals without images. Understanding the performance cost of each lets you achieve great-looking UIs without sacrificing frame rates.

Background Properties

.hero {
  /* Multiple backgrounds — layered front to back */
  background:
    url('noise.png') repeat,
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  background-size: 200px, cover;
  background-position: center, center;
  background-attachment: fixed; /* parallax — use sparingly, triggers paint */
}

Gradients

CSS gradients are generated images — they can be used anywhere an image is accepted.

/* Linear gradient */
.card { background: linear-gradient(to right, #f093fb, #f5576c); }

/* Radial gradient — spotlight effect */
.spotlight {
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3), transparent 60%);
}

/* Conic gradient — pie chart, colour wheel */
.pie {
  background: conic-gradient(
    #3b82f6 0% 40%,
    #f59e0b 40% 70%,
    #10b981 70% 100%
  );
  border-radius: 50%;
}

/* Repeating gradient — striped pattern */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0,0,0,0.05) 10px,
    rgba(0,0,0,0.05) 20px
  );
}

CSS Filters

Filters apply visual effects to an element and its children. They are composited on the GPU in most browsers, making them relatively cheap for static use, but animating them can still be costly.

.image-card:hover img {
  filter: brightness(1.1) saturate(1.2) contrast(1.05);
}

/* Blur — for loading states or background glass effect */
.blurred { filter: blur(8px); }

/* Grayscale — for disabled or archived items */
.disabled { filter: grayscale(100%) opacity(0.6); }

/* Drop shadow (respects transparency, unlike box-shadow) */
.logo { filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }

backdrop-filter — Glassmorphism

backdrop-filter applies effects to whatever is behind the element — enabling frosted-glass UI. It only works when the element has a semi-transparent background.

.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

mix-blend-mode

Blend modes control how an element's colours combine with the layers behind it — similar to Photoshop layer blending.

.overlay-text {
  mix-blend-mode: multiply;  /* good for dark text on images */
  color: #1a1a1a;
}

.color-overlay {
  mix-blend-mode: screen;    /* lightens the underlying layer */
  background: #ff6b6b;
}

/* Useful values: multiply, screen, overlay, difference, exclusion */

CSS Masks and clip-path

/* clip-path — non-rectangular shapes */
.hexagon { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
.circle  { clip-path: circle(50%); }

/* Diagonal section divider */
.diagonal-section {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

/* mask-image — fade edges with a gradient */
.fade-bottom {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

Performance Notes

• filter and backdrop-filter create a new stacking context and can be GPU-composited — but animating them triggers paint
• Avoid background-attachment: fixed on mobile — it prevents GPU compositing and causes paint on every scroll
• Use will-change: transform on elements that animate blur/filters to promote them to their own layer
• Test backdrop-filter on lower-end devices — the blur calculation is expensive