CSS Tutorial
20 Topics- CSS Tutorial Overview
- CSS Introduction
- CSS Fundamentals
- CSS Selectors
- CSS Colors & Backgrounds
- CSS Text & Fonts
- CSS Box Model
- CSS Display & Positioning
- CSS Flexbox
- CSS Grid
- CSS Sizing & Layout
- CSS Lists & Tables
- CSS Transitions & Animations
- CSS Responsive Design
- CSS Advanced Styling
- CSS Functions
- CSS for Accessibility & Print
- CSS Architecture & Methodologies
- CSS Preprocessors & Tools
- CSS Modern & Experimental CSS
CSS Advanced Visual Effects & Graphic Styling
Elevate web designs with multi-layered ambient lighting, glassmorphic backdrop filters, custom vector clip-path geometries, and native CSS counters.
1. Multi-Layered Shadows & Glassmorphism
Single harsh black shadows (box-shadow: 0 4px 10px #000) look dated and synthetic. Modern high-end user interfaces layer multiple subtle shadows with varied blurs and spread radii to simulate natural ambient light diffusion:
Glassmorphism via backdrop-filter:
Frosted glass interfaces require three synchronized properties:
backdrop-filter: blur(12px): Blurs the underlying background image or text.background-color: rgba(255, 255, 255, 0.25): Semi-transparent tinted pane.border: 1px solid rgba(255, 255, 255, 0.4): Highlights the specular edge.
CSS Example
/* Multi-layer shadow card with glassmorphic accents */
.smooth-card {
padding: 24px;
border-radius: 12px;
background: #ffffff;
/* 3-layer ambient shadow for natural elevation */
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 4px 8px rgba(0, 0, 0, 0.04),
0 12px 24px rgba(0, 0, 0, 0.06);
border: 1px solid #f1f5f9;
}
.glass-badge {
display: inline-block;
padding: 6px 14px;
background: rgba(37, 99, 235, 0.15);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(37, 99, 235, 0.3);
border-radius: 20px;
color: #1d4ed8;
font-weight: 600;
font-size: 13px;
}2. CSS Filters & The drop-shadow Superpower
The filter property applies real-time graphical transformations (blur, grayscale, contrast, brightness, hue-rotate).
Why use filter: drop-shadow() over box-shadow?
| Property | Shadow Geometry Calculation | Best Use Case |
|---|---|---|
box-shadow | Casts a shadow along the square box model boundary, even on transparent shapes. | Standard rectangular cards, buttons, and input fields. |
filter: drop-shadow() | Traces the actual alpha silhouette of transparent PNGs, SVGs, or clipped shapes. | Logos, transparent icons, speech bubble triangles, and clipped polygons. |
CSS Example
/* drop-shadow contouring transparent SVG speech bubble */
.speech-bubble {
position: relative;
background: #3b82f6;
color: white;
padding: 16px 20px;
border-radius: 8px;
filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
max-width: 300px;
}
.speech-bubble::after {
content: "";
position: absolute;
bottom: -10px;
left: 30px;
border-width: 10px 10px 0;
border-style: solid;
border-color: #3b82f6 transparent;
display: block;
width: 0;
}3. Clipping & Masking: clip-path and mask-image
The clip-path property carves complex vector silhouettes out of standard HTML elements without touching vector editing software:
circle(radius at x y): Creates perfect circular cutouts.ellipse(): Creates elliptical profiles.polygon(x1 y1, x2 y2, ...): Draws custom geometric multi-point coordinates.
CSS Example
/* Custom polygon banner cutouts */
.angled-banner {
background: linear-gradient(135deg, #4f46e5, #06b6d4);
color: white;
padding: 30px 20px;
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
border-radius: 8px;
text-align: center;
}4. Native CSS Counters for Dynamic Numbering
CSS Counters allow stylesheets to maintain internal numeric state, incrementing numbers dynamically per element:
counter-reset: myCounter;: Initializes counter on parent container.counter-increment: myCounter;: Increments counter by 1 on each item.content: "Step " counter(myCounter) ": ";: Outputs number in pseudo-element.
CSS Example
/* Native CSS Counter Step Engine */
.step-container {
counter-reset: workflowStep;
display: flex;
flex-direction: column;
gap: 12px;
}
.step-card {
counter-increment: workflowStep;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
}
.step-card::before {
content: counter(workflowStep);
width: 28px;
height: 28px;
background: #2563eb;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 13px;
flex-shrink: 0;
}5. Frequently Asked Questions (FAQ)
WebKit engines (Safari on macOS and iOS) require
-webkit-backdrop-filter: blur(...) alongside the standard un-prefixed declaration. Failing to declare the -webkit- prefix results in solid opaque backgrounds on iPhones and iPads.Yes! As long as the starting and ending polygon declarations have the exact same number of coordinate points (e.g. both have 4 vertices), the browser can smoothly interpolate the coordinates in a hardware-accelerated transition.
shape-outside changes how inline text wraps around a floated element. By applying shape-outside: circle(50%) to a floated circular author avatar, surrounding article paragraphs wrap around the curve of the circle instead of respecting a rectangular bounding box.Explore Related Tools
Hand-picked utilities and calculators related to this tool.
