Designing a “Back to Top” Button

A “Back to Top” button is small, but it changes how people experience long pages. In this build, you will design a back-to-top control that looks polished, feels fast, and respects accessibility. You will create a clean circular button, draw the up icon with pure CSS (no images), reveal it only after scrolling, and add … Read more

How to Make CSS-Only Holiday Decorations

You can decorate a page for the season without images or SVGs. In this project you will build a CSS-only holiday scene: a stylized tree made from triangles, a glowing star topper, round ornaments, blinking string lights, gentle snowfall, and a couple of gift boxes. Everything renders from basic HTML elements, pseudo-elements, gradients, and transforms. … Read more

How to Use SVGs as a clip-path URL

You need a clipping shape that goes beyond polygon points and rounded corners. You want a reusable, responsive, designer-friendly shape that you can draw once and apply across components, images, and sections. By the end of this article you will clip content with an SVG-defined shape using clip-path: url(…), wire up an external SVG that … Read more

How to Make a Pure CSS Icon Set

You want a small, themeable icon set that ships zero images, no external fonts, and no SVG sprites. By the end of this guide, you will build a compact, extensible set of icons using only CSS. You will learn a repeatable pattern for drawing icons with borders, backgrounds, gradients, and pseudo-elements. The sample set includes … Read more

7 Creative CSS Text Effects

Your UI copy carries the design. When a headline lands with style, you earn attention without shipping extra images or JavaScript. In this project you will build seven polished CSS text effects: gradient ink, crisp stroke, long shadow, neon, 3D extrusion, shimmer highlight, and a ribbon label with triangle tails. Each effect is production ready, … Read more

Designing a Better 404 “Page Not Found” Page

Visitors land on your 404 page when something goes wrong: a mistyped URL, an outdated link, or a moved document. A forgettable “Not Found” costs trust and creates drop-offs. In this tutorial, you will design a polished, helpful 404 page with clean HTML, modern CSS, accessible semantics, and small flourishes that make recovery effortless. By … Read more

CSS Art: How to Draw a Pokeball

You are going to draw a Pokeball with nothing but CSS. By the end, you will have a responsive, crisp, themeable Pokeball built from gradients, borders, and pseudo-elements. You will understand how to slice a circle into halves, add a center band, build the button with concentric rings, and apply a subtle shake animation for … Read more