Background Gradient with Centered Text

Create vibrant, attention-grabbing callouts or highlights with this card template featuring a full-bleed gradient background and perfectly centered text.

Screenshot of three cards with different gradient backgrounds and centered text.

Get Source Code Preview

About this Component

This card template is designed to make a statement. By forgoing images in favor of bold colors and typography, it serves as an excellent component for primary calls-to-action or for highlighting important messages on a page. The template uses modern CSS for both the gradient effect and for centering the content.

Features

Code Breakdown

HTML Structure

The HTML for each card is extremely simple, consisting of a single div with the class .bgc-card. Inside, a h3 and a p tag hold the content. You can make the entire card a link by wrapping it in an a tag.

CSS Styling

The visual appeal comes from two core CSS techniques. First, the gradient background is applied by using a linear-gradient() as the background value. The colors for this function are stored in CSS variables (e.g., --bgc-gradient-start) to make changes easy. Second, the card's container is set to display: flex. This allows us to use justify-content: center to center the content on the vertical axis and align-items: center to center it on the horizontal axis, providing a robust centering solution with minimal code.

Code

Here is the complete code. You can easily change the gradient colors by editing the CSS variables within the .bgc-card rule, or by adding new modifier classes like the examples.

View Output