Backlit

Radial gradient background glow effect that creates depth and visual interest. Perfect for highlighting CTA buttons, her...

Backlit Class

<button class="primary backlit">
				Highlighted CTA
				</button>
<div class="backlit">
  <button class="primary">Pulsing Glow</button>
</div>

Hero Section with Backlit

Featured Product

This content has a subtle glowing backdrop 

<div class="backlit">
				<h2>Featured Product</h2>
				<p>This content has a subtle glowing backdrop</p>
				</div>

Custom Light Position

Custom Glow Position

Adjust --light-x and --light-y CSS variables to change the glow direction

 
<div class="card backlit">
				<h3>Custom Glow Position</h3>
				<p>Customize light direction...</p>
				</div>

Features

Subtle Glow

Adds depth without overwhelming the design

Customizable

Control light position via CSS variables

Optional Animation

Add .animate class for pulsing effect

Accessible

No impact on readability or functionality

Pure CSS

No JavaScript needed

Theme Aware

Works with all Axiom01 color themes

CSS Variables

Variable Default Purpose
--light-x 50% Horizontal position of light source (0-100%)
--light-y 50% Vertical position of light source (0-100%)

Animation Details

  • Class: .animate
  • Animation name: backlighting-pulse
  • Duration: 3 seconds
  • Timing: ease-in-out
  • Effect: Opacity pulse + light position shift

Use Cases

  • Highlight call-to-action buttons
  • Draw attention to featured products
  • Create depth in hero sections
  • Emphasize testimonials or reviews
  • Spotlight special offers or promotions
  • Focus on key statistics or metrics

Best Practices

  • Use sparingly—too much backlighting dilutes impact
  • Combine with strong contrast for readability
  • Test on both light and dark themes
  • Consider reducing motion preferences (prefers-reduced-motion)
  • Adjust light position for asymmetrical, natural-looking effects
  • Pair with hover states or transitions for interactivity

Browser Support

All modern browsers supporting CSS radial-gradient and CSS animations (Chrome, Firefox, Safari, Edge). No polyfills required.

Accessibility

Axiom01 ensures that the Backlit component meets strict WCAG standards out of the box:

  • Keyboard Navigation - Fully navigable using standard Tab and Arrow key workflows.
  • Screen Reader Support - Requires minimal manual ARIA labeling due to semantic HTML roots.
  • Focus Management - Visible, high-contrast focus indicators without layout shifting.
  • Color Contrast - OKLCH math guarantees perfect WCAG AAA contrast ratios in both light and dark modes.
  • Reduced Motion - Respects system-level prefers-reduced-motion settings for any internal animations.