Graphics CSS-Only Graphics
Modern CSS can produce gradients, shapes, shadows, and filters that used to require an image file — all with zero HTTP requests and perfect scaling.
Drawing Without an Image File
Every image you request costs a network round trip and adds to the page's weight. A lot of visual effects — soft color transitions, rounded panels, cut-out shapes, depth, blur — don't need an image at all anymore; CSS itself can generate them on the fly, and because they're rendered by the browser rather than decoded from a file, they scale to any resolution and respond instantly to size or color changes.
Gradients: Painting with Color Instead of Pixels
A CSS gradient describes a smooth transition between colors — linear (in a straight line), radial (spreading from a center point), or conic (sweeping around like a color wheel) — and the browser computes every pixel of it live. That makes gradients essentially free to resize, recolor, or animate, unlike a gradient baked into a PNG.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.banner {
background: linear-gradient(135deg, #4f46e5, #ec4899);
}
.badge {
background: radial-gradient(circle at 30% 30%, #ffffff, #94a3b8);
border-radius: 50%;
}
</style>
</head>
<body>
<div class="banner"></div>
<div class="badge"></div>
</body>
</html>Shaping Elements: border-radius and clip-path
border-radius rounds an element's corners — push it to 50% on a square element and you get a perfect circle, no image required. clip-path goes further, letting you cut an element down to an arbitrary polygon or curve, so a plain div can become a triangle, a chevron, a speech-bubble shape, or anything else you can describe as a path.
Example
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width: 100px;
height: 100px;
background: #06b6d4;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>Shadows, Filters, and Blends
- box-shadow adds soft, layered depth around an element without any extra markup.
- filter applies effects like blur, grayscale, brightness, or drop-shadow to an element or image after it's rendered.
- mix-blend-mode and background-blend-mode combine colors the way blend modes do in image editors (multiply, screen, overlay).
- backdrop-filter blurs or tints whatever sits behind an element — the effect behind frosted-glass UI panels.
Exercise: Graphics on the Web
What happens when a raster (bitmap) image is scaled up well beyond its original size?
