1. Shadows (text-shadow & box-shadow)
Shadows can enhance depth and readability.text-shadow affects text, while box-shadow affects elements.
CSS Example
.shadow-text {
text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
font-size: 24px;
}
.shadow-box {
width: 150px; height: 100px;
background: lightcoral;
box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
margin: 10px;
}2. Gradients (linear, radial, conic)
Gradients allow smooth transitions between colors.linear-gradient, radial-gradient, conic-gradient.
CSS Example
.linear {
width: 150px; height: 100px;
background: linear-gradient(to right, red, yellow);
margin: 10px;
}
.radial {
width: 150px; height: 100px;
background: radial-gradient(circle, blue, green);
margin: 10px;
}
.conic {
width: 150px; height: 100px;
background: conic-gradient(from 0deg, purple, pink, orange);
margin: 10px;
}3. Filters (blur, grayscale, brightness, contrast, etc.)
Filters modify the visual rendering of elements. Can be combined for creative effects.
CSS Example
.filtered-img {
width: 150px;
filter: grayscale(50%) blur(2px) brightness(120%);
}4. Blend Modes (mix-blend-mode, background-blend-mode)
Blend modes control how elements blend with background or other elements.
CSS Example
.blend {
width: 150px; height: 100px;
background: orange;
mix-blend-mode: multiply;
}5. Clipping & Masking (clip-path, mask-image)
Clip-path and mask-image allow custom shapes and complex visibility effects.
CSS Example
.clipped {
width: 150px; height: 100px;
background: teal;
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
.masked {
width: 150px; height: 100px;
background: coral;
-webkit-mask-image: linear-gradient(to right, transparent, black);
mask-image: linear-gradient(to right, transparent, black);
}6. Shapes & Custom Borders
Create circular, elliptical, or irregular shapes and apply fancy borders.
CSS Example
.circle {
width: 100px; height: 100px;
background: pink;
border-radius: 50%;
border: 5px solid red;
}
.ellipse {
width: 150px; height: 80px;
background: lightblue;
border-radius: 50% / 30%;
border: 3px dashed green;
}7. CSS Counters
CSS counters allow automatic numbering of elements like lists or headings.
CSS Example
body { counter-reset: section; }
.counter-item::before {
counter-increment: section;
content: counter(section) ". ";
font-weight: bold;
}