CSS Effects
7 lessonsAbout 42 minutesIntermediate
This part of the CSS Tutorial runs from CSS Shadows through to Scroll Snap. There are 7 lessons here, and working through them takes about 42 minutes at a steady pace.
It follows on from CSS Lists, Tables & Forms, so finish that first if you have not already — the examples below assume you are comfortable with it.
Each lesson below says what it covers before you open it. Read them in order the first time; afterwards this page works as a index you can jump back into when you need to check one thing.
- 1CSS ShadowsThe CSS Shadows properties are used to add shadow effects to elements and text on a webpage.
- 2CSS GradientsCSS Gradients are used to create smooth transitions between two or more colors without using images.
- 3CSS FiltersThe CSS Filter property is used to apply visual effects to elements, especially images.
- 4CSS OpacityThe CSS Opacity property is used to control the transparency level of an element.
- 5Clipping & MaskingControl visible regions, alpha masks, and the contour around which inline content flows. The examples distinguish visible clipping, alpha masking, basic shapes, SVG paths, and shape-outside for text wrapping.
- 6Blending & BackdropBlend overlapping content, isolate compositing groups, and filter the pixels behind translucent surfaces. It explains element blending, backdrop blending, isolation, translucent glass surfaces, unprefixed support, contrast, and rendering cost.
- 7Scroll SnapCreate deliberate scroll destinations, offsets, and snapping without trapping users. You will build anchor offsets, smooth scrolling, horizontal snap galleries, proximity and mandatory snapping, and a reduced-motion fallback.