Trending Card Design

ankushsingh
Jan 13, 2026 4
Live Preview

Live Editor

<div class="flex">
<div class="card" style="--url:url(https://images.unsplash.com/photo-1662393997616-c8d292bfa5a8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8bWFjbGFyZW4lMjA1NzBzfGVufDB8fDB8fHww&auto=format&fit=crop&w=500&q=60)">
<p class="">Mc'Laren</p>
<div class="card-button-wrapper">
<div class="curve crv-bottom">
</div>
<div class="curve crv-right">
</div>
<div class="card-button"> Mc'Laren </div>
</div>
</div>
</div>
* {
	margin:0;
	padding:0;
	
}
:root {
	--card-width:300px;
	--card-height:150px;
	--background-color:#343434;
	--url:url('https://images.unsplash.com/photo-1596906673164-fffb05b8333d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');
	
}
body {
	height:100vh;
	display:grid;
	place-items:center;
	background:var(--background-color);
	font-family:sans-serif;
	text-transform:uppercase;
	
}
.flex {
	display:flex;
	flex-wrap:wrap;
	transition: all 1s ease;
	
}
.card {
	position:relative;
	width:var(--card-width);
	height:var(--card-height);
	background-image:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.7625759776566876) 100%),var(--url);
	background-size:cover;
	background-position:center center;
	border-radius:calc( 0.15 * var(--card-height));
	transition:all .2s ease-in-out;
	display:grid;
	place-items:center;
	color:#fff;
	font-weight:bolder;
	font-size:2rem;
	margin:.5em;
	
}
.card-button-wrapper {
	position:absolute;
	bottom:0;
	right:0;
	width:calc( 0.3 * var(--card-height));
	height:calc( 0.3 * var(--card-height));
	background:var(--background-color);
	border-radius: calc( 0.2 * var(--card-height)) 0 0 0;
	padding:calc( 0.064 * var(--card-height)) 0 0 calc( 0.064 * var(--card-height));
	
}
.card-button {
	display:grid;
	place-items:center;
	width:calc( 0.3 * var(--card-height));
	height:calc( 0.3 * var(--card-height));
	border-radius:50%;
	background:#fff;
	color:#000;
	bottom:0;
	right:0;
	font-size:calc( 0.03 * var(--card-height));
	transition:all .2s ease-in-out;
	
}
.curve {
	width:calc( 0.15 * var(--card-height));
	height:calc( 0.15 * var(--card-height));
	background: radial-gradient(circle, rgba(255,0,0,0) calc(70% - 1px), var(--background-color) 70%, var(--background-color) 100%);
	background-position:calc( -0.15 * var(--card-height)) calc( -0.15 * var(--card-height));
	background-repeat:repeat;
	background-size:200% 200%;
	
}
.crv-right {
	position:absolute;
	bottom:calc( 0.361 * var(--card-height));
	right:-1px;
	
}
.crv-bottom {
	position:absolute;
	bottom:-1px;
	right:calc( 0.361 * var(--card-height));
	
}
.card-button:hover {
	transform:rotate(-30deg);
	
}
.card-button:hover {
	display:grid;
	place-items:center;
	width:calc( 0.3 * var(--card-height));
	height:calc( 0.3 * var(--card-height));
	border-radius:50%;
	background:#fff;
	color:#000;
	bottom:0;
	right:0;
	font-size:calc( 0.03 * var(--card-height));
	transition:all .2s ease-in-out;
	
}
Categories

Trending Card Design

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
