Pricing Glow CSS

Pricing Glow CSS Pattern

Pure CSS Implementation - No JavaScript required. All animations use CSS @property and @keyframes for smooth, performant animated gradient borders.

How It Works

Uses CSS @property to register --glow-angle as an animatable custom property
Conic gradients rotate via CSS keyframe animations
Toggle controls (animated border, soft glow) work via CSS attribute selectors - no JS needed
Glow color derived dynamically using CSS color-mix() function

Component Properties

Property	Type	Description
`glowColor`	color	Base color for all glow effects
`glowDirection`	select	`cw` (clockwise) or `ccw` (counter-clockwise)
`glowLength`	select	Arc length: `full`, `medium`, `short`, or `minimal`
`animatedBorder`	select	Show/hide rotating gradient border
`softGlow`	select	Show/hide pulsing background blob
`cardVariant`	select	`--dark` or `--light` theme
`tierName`	string	Pricing tier label
`currencySymbol`	string	Currency symbol
`priceAmount`	string	Price value
`pricePeriod`	string	Billing period text
`billingNote`	string	Additional billing info
`feature1-5`	string	Feature list items (5 slots)
`ctaText`	string	Button text
`ctaUrl`	string	Button link URL

⚠️ Required: External CSS File

Some CSS cannot live in Etch's style system and requires a separate file:

@property declarations must be at document root level (not inside selectors)
@keyframes animations must be at document root level
Pseudo-element rules (::after) - Etch doesn't process nested CSS syntax

CSS File Options

Choose ONE of these methods to include the required CSS:

MU-Plugin (recommended): /wp-content/mu-plugins/pricing-glow-css-animations.php
Code Snippets plugin: Paste the PHP code as a snippet
Functionality plugin: Add to your site's custom plugin
Theme functions.php: Add to child theme's functions.php

CSS Architecture

In Etch: All component styles (search pricing-glow-css__)
In external file: @property, @keyframes, and ::after pseudo-elements only