* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #0a0a0a;
color: #fff;
min-height: 100vh;
padding: clamp(20px, 5vw, 60px);
}
.header {
text-align: center;
margin-bottom: clamp(30px, 5vw, 50px);
}
h1 {
font-size: clamp(32px, 7vw, 64px);
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: clamp(8px, 2vw, 12px);
}
.subtitle {
font-size: clamp(14px, 2.5vw, 20px);
color: #888;
margin-bottom: 8px;
}
.section-title {
font-size: clamp(24px, 4vw, 36px);
font-weight: 600;
color: #fff;
margin: clamp(40px, 6vw, 60px) 0 clamp(20px, 3vw, 30px);
text-align: center;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: clamp(16px, 3vw, 24px);
max-width: 1400px;
margin: 0 auto clamp(30px, 5vw, 50px);
}
.gradient-card {
position: relative;
height: clamp(200px, 25vw, 300px);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.gradient-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
/* Linear Gradients */
.gradient-1 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.gradient-2 {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.gradient-3 {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.gradient-4 {
background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
.gradient-5 {
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}
.gradient-6 {
background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}
/* Radial Gradients */
.gradient-7 {
background: radial-gradient(circle at top left, #ff6b6b, #4ecdc4);
}
.gradient-8 {
background: radial-gradient(circle at top right, #a8edea, #fed6e3);
}
.gradient-9 {
background: radial-gradient(circle at bottom left, #ff9a56, #ff6a88);
}
.gradient-10 {
background: radial-gradient(circle at bottom right, #ffeaa7, #fd79a8);
}
.gradient-11 {
background: radial-gradient(circle at center, #6a11cb, #2575fc);
}
.gradient-12 {
background: radial-gradient(circle at center, #f12711, #f5af19);
}
/* Multi-Color Gradients */
.gradient-13 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 33%, #f093fb 66%, #f5576c 100%);
}
.gradient-14 {
background: linear-gradient(90deg, #ff0844 0%, #ffb199 50%, #00c9ff 100%);
}
.gradient-15 {
background: linear-gradient(180deg, #4facfe 0%, #00f2fe 25%, #43e97b 50%, #38f9d7 75%, #fa709a 100%);
}
/* Conic Gradients */
.gradient-16 {
background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1, #f7b731, #ff6b6b);
}
.gradient-17 {
background: conic-gradient(from 90deg, #667eea, #764ba2, #f093fb, #667eea);
}
.gradient-18 {
background: conic-gradient(from 180deg at 30% 50%, #fa709a, #fee140, #30cfd0, #fa709a);
}
/* Animated Gradients */
.gradient-19 {
background: linear-gradient(270deg, #ff6b6b, #4ecdc4, #45b7d1);
background-size: 400% 400%;
animation: gradientShift 8s ease infinite;
}
.gradient-20 {
background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #f5576c);
background-size: 400% 400%;
animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Complex Patterns */
.gradient-21 {
background:
linear-gradient(135deg, rgba(255, 107, 107, 0.8) 0%, transparent 50%),
linear-gradient(45deg, rgba(78, 205, 196, 0.8) 0%, transparent 50%),
linear-gradient(225deg, rgba(69, 183, 209, 0.8) 0%, transparent 50%),
#000;
}
.gradient-22 {
background:
radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.5) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(118, 75, 162, 0.5) 0%, transparent 50%),
linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.gradient-23 {
background:
repeating-linear-gradient(45deg, #ff6b6b 0px, #ff6b6b 10px, #4ecdc4 10px, #4ecdc4 20px);
}
.gradient-24 {
background:
repeating-radial-gradient(circle at center, #667eea 0px, #667eea 10px, #764ba2 10px, #764ba2 20px);
}
.gradient-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: clamp(10px, 2vw, 14px);
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
text-align: center;
font-weight: 600;
font-size: clamp(12px, 2vw, 14px);
border-top: 2px solid rgba(255, 255, 255, 0.1);
}
.info-section {
max-width: 900px;
margin: clamp(40px, 6vw, 60px) auto 0;
padding: clamp(24px, 4vw, 32px);
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
}
.info-section h2 {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: clamp(22px, 4vw, 28px);
margin-bottom: clamp(12px, 2vw, 16px);
}
.info-section p {
color: #ccc;
font-size: clamp(14px, 2vw, 16px);
line-height: 1.8;
margin-bottom: 12px;
}
.gradient-types {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: clamp(12px, 2vw, 16px);
margin-top: clamp(16px, 3vw, 24px);
}
.type-item {
padding: clamp(12px, 2vw, 16px);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
text-align: center;
}
.type-title {
font-weight: 600;
font-size: clamp(14px, 2vw, 16px);
margin-bottom: 6px;
color: #fff;
}
.type-count {
font-size: clamp(12px, 1.8vw, 14px);
color: #888;
}
@media (max-width: 640px) {
.grid {
grid-template-columns: 1fr;
}
}
No comments yet. Be the first!