Always Great Grid
A always great grid built with modern frontend techniques for responsive and reusable UI.
Open Props
7 snippetsBrowse Open Props examples — animations, layouts, typography, and visual effects. Filter the directory below.
css-open-props
Snippets(7)
Dropdown NavigationA dropdown navigation built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 99+, Edge 99+, Firefox 97+, Safari 15.4+Features
CSS Layers, Responsive Design, Mega Menu, Open Props
Hero in Monochrome (Open Props OKLCH)A hero in monochrome (open props oklch) built with modern frontend techniques for responsive and reusable UI.
Vibrant OKLCH Conic HeroA vibrant oklch conic hero built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
BeginnerBrowser support
Chrome 111+, Edge 111+, Firefox 113+, Safari 15.4+Features
Wide Gamut Colors, Perceptual Uniformity, Conic Gradient, Progressive Enhancement
Scroll-Driven Sticky Parallax HeaderA scroll-driven sticky parallax header built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 115+, Edge 115+Features
Scroll-Driven Animations, Sticky Positioning, Parallax EffectResponsive
Yes
Scroll-Driven Masonry RevealA scroll-driven masonry reveal built with modern frontend techniques for responsive and reusable UI.
Technologies
HTML, CSSDifficulty
IntermediateBrowser support
Chrome 115+, Edge 115+, Safari 26+, Firefox (flag/polyfill)Features
Scroll Triggered, Staggered Entrance, Responsive Grid, Reduced MotionResponsive
Yes
Can :has() Connect 4?A can :has() connect 4? built with modern frontend techniques for responsive and reusable UI.
Technologies
CSS :has(), Checkbox HackDifficulty
AdvancedFeatures
CSS-only game logic, Win condition detection, No-JS implementation