Basic CSS
Selectors, properties, and the cascade - where it all begins
Explore basicsThe Ultimate CSS Showcase
From pixels to perfection - explore the magnificent world of CSS with interactive examples and clean code.
Fundamentals
Master the building blocks of brilliant web design
Box Model
Understanding padding, borders, and margins like a proper developer
Master the boxTypography
Beautiful type that would make even The Times jealous
Style your textAbout This Showcase
Welcome to my CSS playground! I'm Thomas Butler, and I created this showcase whilst learning the ins and outs of CSS. What started as a learning journey has evolved into a comprehensive demonstration of CSS's incredible capabilities.
Every example here is crafted with care, using clean, semantic HTML and modern CSS techniques. No frameworks, no libraries, just pure CSS magic that works brilliantly across all modern browsers.
Whether you're a fellow developer looking for inspiration or someone curious about what CSS can do, I hope you find something here that sparks your creativity. Feel free to view source, inspect elements, and use any techniques you find useful in your own projects.
Layout Mastery
Modern techniques for pixel-perfect positioning
Flexbox
Flexible layouts that bend but never break
Get flexibleCSS Grid
Two-dimensional layouts with surgical precision
Join the gridResponsive Design
Brilliant on every device, from mobile to cinema display
Go responsiveVisual Effects
Eye candy that performs as good as it looks
Gradients
Smooth colour transitions that would make a rainbow jealous
Blend coloursTransitions
Silky smooth state changes that delight users
Add motionAnimations
Keyframe magic that brings your designs to life
Start animatingComponents
Production-ready elements for real-world projects
Buttons
Click-worthy buttons that beg to be pressed
Press buttonsForms
Input fields that are actually pleasant to use
Style formsTables
Data presentation that's both functional and beautiful
Organise dataCards
Versatile containers for any type of content
Deal cardsPure CSS Icons
No fonts needed - icons made entirely with CSS
View iconsFilters & Effects
Instagram-worthy effects with pure CSS
Apply filtersAdvanced Techniques
Push CSS to its absolute limits
Custom Properties
CSS variables that make theming a doddle
Get variableBlend Modes
Photoshop-style effects without leaving CSS
Start blendingShapes & Clips
Break free from rectangular tyranny
Shape upModern CSS (2024-2025)
The latest and greatest CSS features that are changing the game
:has() Selector
The parent selector we've all been waiting for!
Has it allContainer Queries
Responsive components based on container size
Get responsiveCSS Nesting
Native nesting without preprocessors
Nest awayAnchor Positioning
Position elements relative to others easily
Drop anchorScroll Animations
Scroll-driven animations without JavaScript
Start scrollingNew Colour Spaces
OKLCH, LAB, and more vibrant colours
Expand palette