@keyframesBeginner
CSS animations with @keyframes
Build reliable CSS animation timelines, combine multiple motions, and keep them smooth and accessible.
3,495 effectsRead guide
Technique guides
CSS effect techniques
Each guide explains one technique from syntax to production: working code, browser support, performance, accessibility, and common mistakes. Examples come from a catalog of 9,078 effects.
:hoverBeginner
Interaction effects with :hover and transitions
Design responsive hover feedback that also works for keyboards, touch input, and reduced-motion users.
2,879 effectsRead guide
::before / ::afterIntermediate
Layering with ::before and ::after
Create independent decorative layers with predictable positioning, stacking, clipping, and pointer behavior.
2,842 effectsRead guide
clip-pathIntermediate
Cutting shapes with clip-path
Clip boxes into responsive geometric shapes and animate them without changing document layout.
512 effectsRead guide
conic-gradient()Intermediate
Rings, charts, and highlights with conic-gradient
Paint angular color stops for progress rings, segmented charts, rotating glows, and compact procedural patterns.
291 effectsRead guide
perspective / transformAdvanced
Perspective and CSS 3D transforms
Construct stable 3D scenes, preserve depth across children, and avoid flattening, clipping, and unreadable text.
227 effectsRead guide
backdrop-filterIntermediate
Frosted glass with backdrop-filter
Blur and adjust the scene behind translucent surfaces without sacrificing contrast, fallback quality, or scrolling performance.
88 effectsRead guide
mix-blend-modeAdvanced
Compositing layers with CSS blend modes
Combine colors and layers with predictable blend boundaries, readable fallbacks, and manageable rendering cost.
103 effectsRead guide
maskAdvanced
Alpha masking with CSS mask
Control visibility per pixel with gradients and images, including soft edges, real cutouts, and reusable monochrome icons.
54 effectsRead guide
--custom-propertyIntermediate
Themeable effects with CSS custom properties
Turn repeated values into a clear component API and animate typed custom properties safely with @property.
40 effectsRead guide
Frequently asked questions
- What makes these CSS guides different?
- Each guide connects its technique to real effects from the LibraryCSS catalog. You can learn the syntax, inspect working examples, and open the complete source without leaving the English section.
- Can I use the code examples in my projects?
- Yes. The examples are free for personal and commercial projects. They use pure CSS and require no framework, package, or build step.
- Which guide should I read first?
- Start with @keyframes and hover effects, then learn ::before and ::after for component layering. The remaining guides build on those foundations.
- Are browser-support notes kept current?
- The support tables and newer CSS features are reviewed as the catalog evolves. Every guide shows its most recent update date.
Build with the techniques
Look up exact property syntax in the reference or generate production-ready CSS with the visual tools.