Gradient Border Card
Gradient Border
A card with a gradient border using nested divs and background trick.
<div style="background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;padding:2px;max-width:320px"><div style="background:#1a1a2e;border-radius:14px;padding:24px;color:#e0e0e0"><h3 style="margin:0 0 8px;font-size:1.2em">Gradient Border</h3><p style="margin:0;opacity:0.8;font-size:0.9em">A card with a gradient border using nested divs and background trick.</p></div></div>Customize
#667eea
#764ba2
#1a1a2e
px
Props
| Name | Type | Default | Description |
|---|---|---|---|
text | text | Gradient Border | Displayed text |
color1 | color | #667eea | Border gradient start color |
color2 | color | #764ba2 | Border gradient end color |
bgColor | color | #1a1a2e | Card background color |
borderRadius | slider (px) | 16px | Corner roundness |
Gradient border card