Diseño de tarjeta CSS con fondo degradado

1319 zegarkidawida

Abrir en el editor Video Publica tu código

Diseño de tarjeta CSS con fondo degradado

Recomendado

16 September 2025

Carrusel de tarjetas 3D HTML CSS JavaScript

28 August 2025

Ejemplo de pestañas CSS: diseño HTML simple

22 April 2025

Un código de andres.stahr

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

Recomendado

Carrusel de tarjetas 3D HTML CSS JavaScript

Ejemplo de pestañas CSS: diseño HTML simple

Un código de andres.stahr

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS