Diseño de tarjeta CSS con fondo degradado

729 parvardeh.7373

Abrir en el editor Publica tu código

Diseño de tarjeta CSS con fondo degradado

Recomendado

17 November 2023

Inicio de Sesión

24 July 2025

Fragmento de animación de carga de CSS

4 December 2025

Golpe de muñeco de trapo

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