Gradient Card

Add animated borders to your cards

Use the GradientCard component to add an animated gradient border to your cards to increase their visibility, and highlight important content on your page, such as featured products, special offers, promotions, top-rated items, or new releases.

<GradientCard title="Gradient Card" secondary={true}>
    Gradient Card with animated border
</GradientCard>

The API of the GradientCard component matches the API of the Card component, meaning you can use any valid card prop with your GradientCard component. In the above example, both the title and secondary props are specific to the Card component. The GradientCard is only responsible for adding an animated border to your card that can be further configured with additional props.

Border Size

You can customize the size of the border by specifying the border prop on the component:

<GradientCard title="Thicker borders" secondary={true} border={3}>
    Gradient Card with increased border
</GradientCard>

Animation Timing

The border does one rotation every five seconds. This animation timing can be refined using the animationTime prop:

<GradientCard title="Animation time" secondary={true} animationTime={1}>
    Gradient Card with 1s animation time
</GradientCard>

Custom Colors

The component uses a mixture of blue and purple colors by default. You can easily change this to suit your brand colors by specifying the startColor and endColor props on the card:

<GradientCard
    title="Custom colors"
    secondary={true}
    startColor="var(--w-color-info)"
    endColor="var(--w-color-alert)"
>
    Gradient Card with custom colors
</GradientCard>

Configure Blur

Similar to colors, you can customize the blur and spread amount of the border, using the blurAmount and scaleAmount props:

<GradientCard
    title="Custom blur"
    secondary={true}
    blurAmount={30}
>
    Gradient Card with custom blur
</GradientCard>

<GradientCard
    title="Custom scale"
    secondary={true}
    scaleAmount={1}
>
    Gradient Card with custom scale
</GradientCard>

Customize with CSS

The above props can be used to customize the appearance of your GradientCard components on an individual basis. However, if you need custom styles for all of your GradientCard components, the recommended way is to override the following CSS variables once, and remove any GradientCard-specific props from your code:

html body {
    --w-gradient-card-border: 2px;
    --w-gradient-card-animation-time: 5s;
    --w-gradient-card-start-color: #1CAED7;
    --w-gradient-card-end-color: #4E00C2;
    --w-gradient-card-blur-amount: 75px;
    --w-gradient-card-scale-amount: .8;
}

API

type GradientCardProps = {
    border?: number
    animationTime?: number
    startColor?: string
    endColor?: string
    blurAmount?: number
    scaleAmount?: number
    className?: string
} & CardProps