Diseño de tarjeta CSS con fondo degradado

409 parvardeh.7373

Abrir en el editor Publica tu código

Diseño de tarjeta CSS con fondo degradado

Recomendado

22 January 2026

Plantilla HTML de vida sostenible y retiro en la naturaleza

10 December 2025

Código HTML del juego Soccer Random 1

17 January 2026

Portafolio de desarrolladores web: HTML, CSS, JavaScript, UI/UX

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);
	}
}

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);
		});
	});