Gradient Border Cards

Beautiful gradient borders for enhanced visual appeal

Default Gradient Colors

Default Gradient

Purple to yellow to orange

Beautiful gradient border using pm7-gradient-border

Blue Gradient

Cool blue tones

Using pm7-gradient-border-blue

Green Gradient

Fresh green shades

Using pm7-gradient-border-green

Border Thickness Variations

1px Border

Default thickness

2px Border

Using pm7-gradient-border-2

4px Border

Using pm7-gradient-border-4

Interactive Card with Gradient

Hover Me!

Interactive card with primary gradient

This card combines the hoverable effect with a gradient border. The card lifts on hover while maintaining the beautiful gradient border.

Card Variants with Gradient

Ghost Card

Ghost variant with red gradient border

Outlined Card

Outlined variant with gradient

Elevated Card

Elevated with 2px blue gradient

Back to Docs