Sarah Jenkins Gradients are more than candy-colored backgrounds. With a few lines of CSS, you can create legible gradient text, elegant borders, readable hero overlays, data-rich charts, and crisp patterns. By the end of this article, you will have five practical gradient techniques you can copy into your next project and adapt without adding new dependencies or … Read more
You want a real, tangible 3D object on the page without JavaScript. By the end of this walkthrough, you will build a responsive 3D CSS cube with six faces, proper perspective, subtle lighting, and smooth rotation. You will control size and theme with CSS custom properties, and you will add motion that respects reduced motion … Read more
You will build the classic “Star Wars” opening text crawl with pure HTML and CSS: the blue intro line, the yellow tilted crawl that tapers into the distance, a subtle starfield, and a soft fade at the top. By the end, you will have a reusable component that works without JavaScript and is easy to … Read more
Default list bullets work, but they rarely match a brand, a theme, or a design system. In this walkthrough you will build five creative <ul> bullet styles using pure CSS. No images, no SVGs, just careful use of pseudo-elements, gradients, and a few transforms. By the end, you will have reusable classes for triangles, circles, … Read more
Most links do the same thing on hover: they change color and call it a day. You can go further with a few lines of CSS. In this guide you will build five polished hover effects that drop into any project: an underline slide, a highlight sweep, an arrow nudge, a 3D flip, and a … Read more
Shadow choice affects how real your UI feels. Pick the wrong one and icons look like rectangles with fuzzy edges. Pick the right one and stickers, badges, and odd shapes read as physical objects. By the end of this article you will know when to reach for filter: drop-shadow() and when box-shadow wins. You will … Read more
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
You will build a looping Pac-Man scene powered only by CSS. The character will chomp, glide across a track, and make pellets disappear in sync. By the end, you will have a compact component that proves how far modern CSS can go without JavaScript. Why Pure CSS Pac-Man Animation Matters Micro-animations make interfaces feel alive, … Read more
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
Card UI does not have to be a rectangle with a shadow. You can turn a stock card into a branded component with a few shape accents: a corner ribbon for status, a circular avatar that breaks the frame, a coupon notch that signals deals, a price-tag tab that cues commerce, and a starburst sticker … Read more