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.
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
-
Clone the repo.
git clone https://github.com/MengTo/Skills -
Point Codex at the skill file.
agent-skills/web-design/css-border-gradient/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Point Codex at a card or pricing panel that needs a better edge.
-
Pick the simple pattern for solid fills, masked for complex backgrounds.
-
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.