Frontend & UI

Border Gradients

Add a refined gradient edge to cards, modals, and hero surfaces.

What it is

A CSS recipe for subtle gradient borders using padding-box and border-box layering, plus a masked pseudo-element variant for surfaces with complex backgrounds.

Apply subtle gradient-border treatments for premium web surfaces. Use when cards, pricing panels, nav bars, modals, buttons, or hero surfaces need a refined edge highlight without a loud glow.
From the upstream SKILL.md

Why it matters for design

  • Gives premium edge definition without the loud glow of neon borders.
  • The masked variant preserves an existing background instead of overwriting it.
  • Defaults keep stops under 0.4 opacity, so borders frame rather than compete.

What it covers

  • Use when
  • Defaults
  • Simple CSS pattern
  • Masked pattern
  • Tailwind shortcut
  • Taste rules

How to install

Border Gradients

  1. Clone the repo.

    git clone https://github.com/MengTo/Skills
  2. Point Codex at the skill file.

    agent-skills/web-design/css-border-gradient/SKILL.md
  3. Then describe the UI you want. Codex follows the skill.

How to run it with Codex

  1. Point Codex at a card or pricing panel that needs a better edge.

  2. Pick the simple pattern for solid fills, masked for complex backgrounds.

  3. Check light and dark themes separately, since alpha rarely transfers.

Every plugin here is free, open source, and links to its real upstream source.

More on the codex-design list ↗

Next step

Design with Open Design, without the setup

Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.