Gradient Border Article Card with Hover Rotation Effect Using HTML and CSS

This card layout presents an attractive way to showcase articles or blog summaries on a webpage. With its gradient border, clean typography, and subtle hover animation, the design offers both style and readability. It’s built entirely with HTML and CSS, making it lightweight and easy to implement.

Layout Overview

The card has a compact and structured layout. It features a header with meta information, a bold article title, a category label section, and a footer with the author’s name. Each part is placed clearly within a vertical column, making the content easy to scan.

The overall card sits inside a fixed-size container with padding and rounded corners. The content is spaced evenly, and the use of flexbox helps maintain the vertical structure throughout.

Visual Styling and Gradient Border

One of the most noticeable features of this card is its gradient border. The background includes two layers: a solid dark base and a bright diagonal gradient on the border. This is achieved without using traditional border color properties, giving the card a glowing edge effect that stands out against dark or plain backgrounds.

Rounded corners and consistent spacing inside the card add to the modern look. The card also uses white text for readability against the dark background, while smaller elements like category tags and metadata use contrasting colors to draw attention without overwhelming the design.

Header and Metadata

At the top of the card, the header includes two pieces of information: a label indicating it’s an article and the published date. These are displayed side by side with a subtle gray color and slight font weight. This helps the metadata stay visible without distracting from the main content.

Main Title and Category Tags

The central focus of the card is the article title. It’s styled in a bold, larger font and placed with ample margin to separate it from surrounding elements. Below the heading, the card includes two small category labels — “React” and “CSS” — displayed as rounded tags. These tags use bright background colors, uppercase text, and extra padding to make them look clickable and highlight the topics covered in the article.

Footer Author Name

At the bottom of the card, there’s a line indicating the author’s name. It uses a soft gray tone with medium font weight to balance visibility and subtlety. This keeps the design clean while still giving credit to the content creator.

Hover Rotation Effect

When a user hovers over the card, it gently rotates on its bottom-right corner. This animation adds a playful and interactive feel to the design. The rotation is smooth and happens over a short duration, making the card feel alive without being too flashy.

This effect draws attention to the card without disrupting the flow of the page. It’s a simple addition that enhances the user experience and makes the interface feel more dynamic.

Conclusion

This article card layout is perfect for displaying blog posts, tutorials, or featured content in a modern and engaging way. The combination of structured content, gradient borders, bold headings, and a smooth hover effect creates a stylish presentation that’s both functional and visually appealing. It’s a great addition to any blog or content-rich website looking for a professional card design using only HTML and CSS.