Border Gradients

Use When

• A surface needs a more premium edge than a flat border.
• Dark glass, pricing, hero, modal, or feature-card UI feels too plain.
• A hover or focus state needs a quiet brand accent.

Defaults

• Width: 1px; use 2px only for large hero cards or active states.
• Radius: inherit the parent radius.
• Angle: 135deg or 160deg.
• Stops: neutral highlight, one brand accent, neutral fade.
• Opacity: keep most stops below 0.4; subtle beats shiny.

Simple CSS Pattern

Use this when the surface has a solid or translucent fill.