Mastering color models is essential for crafting modern, high-contrast dark and light user interfaces.
1. CSS Color Formats
⊞Code Example
.element-hex {
color: #04AA6D;
background-color: #0c1328;
}
.element-rgba {
/* 50% transparent white background */
background-color: rgba(255, 255, 255, 0.5);
}
.element-hsl {
/* Vibrant Emerald Green */
color: hsl(158, 95%, 34%);
}
2. Linear & Radial Gradients
Gradients create rich, multi-tone backgrounds without requiring heavy external image assets.
⊞Code Example
/* Linear Gradient from Cyan to Emerald */
.gradient-banner {
background: linear-gradient(135deg, #06b6d4 0%, #04AA6D 100%);
color: #ffffff;
padding: 32px;
border-radius: 16px;
}
/* Radial Glow for Modern Dark Mode */
.dark-hero-glow {
background: radial-gradient(circle at center, rgba(4, 170, 109, 0.15) 0%, transparent 70%);
}
3. Working Example: Glowing Gradient Badge
⊞HTML5 Web Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: #060c18;
font-family: system-ui, sans-serif;
padding: 40px;
}
.badge {
display: inline-block;
padding: 8px 18px;
font-size: 13px;
font-weight: 700;
color: #ffffff;
background: linear-gradient(90deg, #10b981, #06b6d4);
border-radius: 9999px;
box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
}
</style>
</head>
<body>
<div class="badge">🚀 Full Stack Developer Ready</div>
</body>
</html>