Skip to content
Get packs

CSS Border Gradient

Gives the agent a recipe for subtle gradient borders on cards, buttons, and modals.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
4 files

What it does

Once installed, the agent can add refined gradient edges to web interface elements such as cards, pricing panels, nav bars, modals, buttons, and hero sections, instead of a flat one-colour border. The skill supplies tested-looking CSS and Tailwind patterns, default values for width, angle and opacity, and design rules that keep the effect subtle rather than flashy. It is guidance for writing front-end code, not a tool that runs anything itself.

Great for

  • Front-end developers polishing a landing page or dashboard UI
  • Designers who want to hand off premium-looking card or button styles to code
  • Anyone using an AI agent to style a dark-glass or hero interface

Skip it if

  • Projects that need rainbow, neon or animated borders, since the skill explicitly discourages those styles by default
  • Teams with strict accessibility audits that need verification beyond the skill's quick checks, because the skill only gives general focus-state reminders

Try asking

  • “Add a subtle gradient border to this pricing card and keep it quiet in dark mode”
  • “Apply a masked gradient border to the hero panel that already has a background image”
  • “Give the selected plan tile a gradient edge using the Tailwind shortcut”
  • “Review this modal's border and suggest a restrained gradient that matches the existing radius”
Step-by-step guide: how to use CSS Border GradientInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    css-border-gradient.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip css-border-gradient.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip css-border-gradient.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the specific element and its radius so the agent can match the border exactly
  • Ask for light and dark theme versions separately, since the skill recommends checking each theme on its own
  • Use the masked pattern when the surface already has a background that must not be overwritten

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • demo/source.json
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.