cardgradient-borderadvanced

Gradient Border Card

A card with a vibrant animated gradient border using a padding-based technique.

Preview

Gradient Border

A thin gradient border wraps around solid content using the padding trick.

<div class="bg-gradient-to-r from-pink-500 via-purple-500 to-cyan-500 p-[2px] rounded-xl">
  <div class="bg-white rounded-xl p-6">
    <h3 class="text-lg font-bold text-gray-800 mb-2">Gradient Border</h3>
    <p class="text-gray-600 text-sm">A thin gradient border wraps around solid content using the padding trick.</p>
  </div>
</div>

Color Breakdown

Gradient Start

from-pink-500

#ec4899

Gradient Middle

via-purple-500

#a855f7

Gradient End

to-cyan-500

#06b6d4

Card Background

bg-white

#ffffff

Title

text-gray-800

#1f2937

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-900

Use Cases

Premium feature cardsHighlighted contentAward or achievement cards

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Glassmorphism Card

card - intermediate

Neumorphism Card

card - intermediate

Image Overlay Card

card - intermediate

Pricing Card

card - intermediate

Testimonial Card

card - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How does the gradient border technique work?▼

The outer div has a gradient background and 2px padding. The inner div has a solid background and matching border-radius, revealing the gradient as a border.