A personal playground for practical developer utilities, creative browser apps, and quick games.

Explore

Tools
Apps
Games
Docs

Built: 7/14/2026, 3:09:16 PM

Finds

Tools
CSS
CSS Card Generator

Tools
CSS
CSS Card Generator

CSS Card Generator

Build a card with elevation presets, radius, border, and an optional gradient header — copy the CSS

Surface

Background

Width320px

Radius16px

Padding24px

Elevation

Border

Border width1px

Border color

Gradient header

Header color 1

Header color 2

Header height80px

Live preview

Card title

A short supporting line of body text to preview spacing and contrast.

CSS

.custom-card {
  width: 320px;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.custom-card__header {
  height: 80px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border-radius: 16px 16px 0 0;
}
.custom-card__body {
  padding: 24px;
}