Border Gradients Use When - A surface needs a more premium edge than a flat . - Dark glass, pricing, hero, modal, or feature-card UI feels too plain. - A hover or focus state needs a quiet brand accent. Defaults - Width: ; use only for large hero cards or active states. - Radius: inherit the parent radius. - Angle: or . - Stops: neutral highlight, one brand accent, neutral fade. - Opacity: keep most stops below ; subtle beats shiny. Simple CSS Pattern Use this when the surface has a solid or translucent fill. Masked Pattern Use this when the surface already has a complex background that shoul…