ग्रेडिएंट पृष्ठभूमि के साथ CSS कार्ड लेआउट

1113 zegarkidawida

संपादक में खोलें अपना कोड प्रकाशित करें

ग्रेडिएंट पृष्ठभूमि के साथ CSS कार्ड लेआउट

अनुशंसित

21 August 2025

लॉगिन और पंजीकरण फ़ॉर्म (HTML, CSS, JS)

2 February 2024

स्पा के लिए

HTML

<main>
	<h1>Lorem Ipsum</h1>
	<p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

<div class="cards-container">
		<div class="card" data-rotation-factor="2">
			<div class="card-content">
				<h2>Card title</h2>
				<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus, qui! Distinctio adipisci odio molestiae quasi.</p>
				<div class="card-footer">
					<button class="card-button">Info CTA</button>
					<div class="card-icon">→</div>
				</div>
			</div>%
		</div>

<div class="card" data-rotation-factor="2">
			<div class="card-content">
				<h2>Card title</h2>
				<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus, qui! Distinctio adipisci odio molestiae quasi.</p>
				<div class="card-footer">
					<button class="card-button">Info CTA</button>
					<div class="card-icon">→</div>
				</div>
			</div>
		</div>

CSS

:root {
	--color-bg: #050505;
	--color-text: #ffffff;
	--color-primary: #ff3366;
	--color-secondary: #3366ff;
	--color-tertiary: #33ddff;
	--color-accent: #ffcc00;
	--card-radius: 16px;
	--card-bg: rgba(255, 255, 255, 0.03);
	--card-border: rgba(255, 255, 255, 0.1);
	--card-shadow: 0 15px 30px -12px rgba(0, 0, 0, 0.5);
	--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	background-color: var(--color-bg);
	color: var(--color-text);
	min-height: 100vh;
	overflow-x: hidden;
	line-height: 1.5;
}

.background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
}

.gradient-blob {
	position: absolute;
	border-radius: 100%;
	filter: blur(40px);
	opacity: 0.3;
	animation: float 20s infinite alternate ease-in-out;
}

.gradient-blob:nth-child(1) {
	background: linear-gradient(
		to right,
		var(--color-primary),
		var(--color-secondary)
	);
	width: 150vw;
	height: 150vw;
	top: -100%;
	left: -25%;
	animation-delay: 0s;
}

.gradient-blob:nth-child(2) {
	background: linear-gradient(
		to right,
		var(--color-tertiary),
		var(--color-secondary)
	);
	width: 150vw;
	height: 150vw;
	bottom: -100%;
	right: -25%;
	animation-delay: -5s;
}

.gradient-blob:nth-child(3) {
	background: linear-gradient(
		to right,
		var(--color-accent),
		var(--color-primary)
	);
	width: 100vw;
	height: 100vw;
	top: 30%;
	left: -50%;
	animation-delay: -10s;
}

@keyframes float {
	0% {
		transform: translate(0, 0) scale(1);
	}
	50% {
		transform: translate(2%, 2%) scale(1.02);
	}
	100% {
		transform: translate(-2%, -2%) scale(0.98);
	}
}

main {
	width: 100%;
	padding: 2rem 1rem;
	position: relative;
	z-index: 1;
}

h1 {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 0.5rem;
	line-height: 1.1;
	background: linear-gradient(
		to right,
		var(--color-text),
		rgba(255, 255, 255, 0.7)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
}

.subtitle {
	font-size: 1rem;
	text-align: center;
	margin-bottom: 3rem;
	opacity: 0.8;
}

.cards-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	perspective: 1000px;
}

.card {
	position: relative;
	height: 320px;
	border-radius: var(--card-radius);
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	transform-style: preserve-3d;
	transition: var(--transition);
	cursor: pointer;
	overflow: hidden;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		circle at var(--x, 50%) var(--y, 50%),
		rgba(255, 255, 255, 0.1) 0%,
		transparent 50%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.card:hover::before {
	opacity: 1;
}

.card-content {
	position: relative;
	height: 100%;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
}

.card h2 {
	font-size: 1.5rem;
	margin-bottom: 0.75rem;
	font-weight: 700;
	transform: translateZ(20px);
	background: linear-gradient(
		to right,
		var(--color-text),
		rgba(255, 255, 255, 0.8)
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.card p {
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	opacity: 0.8;
	transform: translateZ(15px);
}

.card-footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transform: translateZ(15px);
}

.card-button {
	padding: 0.6rem 1.2rem;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 100px;
	color: var(--color-text);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.3s ease;
	backdrop-filter: blur(5px);
}

.card-button:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}

.card-icon {
	font-size: 1.25rem;
	opacity: 0.7;
	transition: transform 0.3s ease;
}

.card:hover .card-icon {
	transform: translateX(5px);
	opacity: 1;
}

@media (min-width: 640px) {
	main {
		padding: 5vh 2rem;
	}

h1 {
		font-size: 3.5rem;
		margin-bottom: 0.75rem;
	}

.subtitle {
		font-size: 1.1rem;
		margin-bottom: 4rem;
	}

.card {
		height: 350px;
	}

.card-content {
		padding: 1.75rem;
	}

.card-tag {
		font-size: 0.75rem;
		padding: 0.5rem 1rem;
		margin-bottom: 1.25rem;
	}

.card h2 {
		font-size: 1.6rem;
	}

.card p {
		font-size: 1rem;
	}

.card-button {
		padding: 0.7rem 1.4rem;
		font-size: 0.9rem;
	}

.gradient-blob {
		filter: blur(50px);
		opacity: 0.35;
	}
}

@media (min-width: 768px) {
	.cards-container {
		grid-template-columns: repeat(2, 1fr);
	}

.gradient-blob {
		filter: blur(60px);
		opacity: 0.4;
	}

.gradient-blob:nth-child(1) {
		width: 120vw;
		height: 120vw;
		top: -70%;
		left: -20%;
	}

.gradient-blob:nth-child(2) {
		width: 120vw;
		height: 120vw;
		bottom: -70%;
		right: -20%;
	}

.gradient-blob:nth-child(3) {
		width: 80vw;
		height: 80vw;
		top: 30%;
		left: -30%;
	}

.card-content {
		padding: 2rem;
	}

.card h2 {
		transform: translateZ(25px);
	}

.card-tag {
		transform: translateZ(20px);
	}

.card p {
		transform: translateZ(20px);
	}
}

@media (min-width: 1024px) {
	main {
		max-width: 1200px;
		margin: 0 auto;
		padding: 10vh 2rem;
	}

h1 {
		font-size: 4.5rem;
	}

.subtitle {
		font-size: 1.25rem;
	}

.cards-container {
		grid-template-columns: repeat(3, 1fr);
	}

.card {
		height: 400px;
		border-radius: 24px;
	}

.gradient-blob {
		filter: blur(80px);
		opacity: 0.5;
	}

.gradient-blob:nth-child(1) {
		width: 60vw;
		height: 60vw;
		top: -20%;
		left: -10%;
	}

.gradient-blob:nth-child(2) {
		width: 60vw;
		height: 60vw;
		bottom: -30%;
		right: -10%;
	}

.gradient-blob:nth-child(3) {
		width: 40vw;
		height: 40vw;
		top: 40%;
		left: 30%;
	}

.card h2 {
		font-size: 1.75rem;
		transform: translateZ(30px);
	}

.card-tag {
		transform: translateZ(20px);
	}

.card p {
		transform: translateZ(25px);
	}

.card-footer {
		transform: translateZ(20px);
	}
}

JS

document.addEventListener("DOMContentLoaded", () => {
	const cards = document.querySelectorAll(".card");
	const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 0;

cards.forEach((card) => {
		const content = card.querySelector(".card-content");
		const rotationFactor =
			parseFloat(card.getAttribute("data-rotation-factor")) || 2;

if (!isTouchDevice) {
			card.addEventListener("mousemove", (e) => {
				const rect = card.getBoundingClientRect();
				const x = e.clientX - rect.left;
				const y = e.clientY - rect.top;

const centerX = rect.width / 2;
				const centerY = rect.height / 2;
				const rotateY = (rotationFactor * (x - centerX)) / centerX;
				const rotateX = (-rotationFactor * (y - centerY)) / centerY;

content.style.transform = `
          rotateX(${rotateX}deg) 
          rotateY(${rotateY}deg)
        `;

card.style.setProperty("--x", `${(x / rect.width) * 100}%`);
				card.style.setProperty("--y", `${(y / rect.height) * 100}%`);
			});

card.addEventListener("mouseleave", () => {
				content.style.transform = "rotateX(0) rotateY(0)";

content.style.transition = "transform 0.5s ease";
				setTimeout(() => {
					content.style.transition = "";
				}, 500);
			});
		}

const randomDelay = Math.random() * 2;
		card.style.animation = `cardFloat 4s infinite alternate ease-in-out ${randomDelay}s`;
	});

const buttons = document.querySelectorAll(".card-button");
	buttons.forEach((button) => {
		button.addEventListener("click", (e) => {
			e.stopPropagation();

const ripple = document.createElement("span");
			ripple.classList.add("ripple");
			button.appendChild(ripple);

const rect = button.getBoundingClientRect();
			const size = Math.max(rect.width, rect.height) * 2;

ripple.style.width = ripple.style.height = `${size}px`;
			ripple.style.left = `${e.clientX - rect.left - size / 2}px`;
			ripple.style.top = `${e.clientY - rect.top - size / 2}px`;

ripple.classList.add("active");

setTimeout(() => {
				ripple.remove();
			}, 500);
		});
	});

अनुशंसित

लॉगिन और पंजीकरण फ़ॉर्म (HTML, CSS, JS)

सीएसएस सोशल्स कार्ड

स्पा के लिए

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS