CSS Examples
This extensive library unlocks the full potential of modern CSS, ranging from structural layouts to creative visual effects. The power of CSS Grid and Flexbox is combined for building responsive interfaces, alongside the artistic capabilities of backdrop-filter and @keyframes animations. Practical UI patterns, such as forms and cards, are optimized using CSS variables and pseudo-elements, ensuring easy theming and clean code. These examples serve as a versatile toolkit for solving any frontend challenge without relying on JavaScript.
Tip: Utilize Ctrl+F to easily search the current page or use the search bar to explore this site.
Table of Contents
Effects
- 3D Transform Examples
- Animation Examples
- Blob Effects
- Blur Effects
- Book Effects
- Cutout Effects
- Direction Aware Effects
- Drop Effects
- Duotone Effects
- Faiding Effects
- Flashlight Effects
- Frosted Glass Effects
- Glitch Effects
- Glow Effects
- Gooey Effects
- Hero Sections
- Hover Effects
- Liquid Effects
- Liquid Glass Effects
- Morphing Effects
- Neon Effects
- Optical Illusions
- Page Flip Effects
- Page Transitions
- Paper Effects
- Parallax Effects
- Perspective Effects
- Rain Effects
- Ripple Effects
- RGB Effects
- Rolling Effects
- Scroll Effects
- Snow Effects
- Shimmer Effects
- Shine Effects
- Text Effects
- Text Animations
- Text Glitch Effects
- Text Glow Effects
- Text Highlight Effects
- Text Shadow Effects
- 3D Text Effects
- Typing Text Effects
- Drop Caps
- Tilt Effects
- Water Effects
- Wave Effects
- Zoom Effects
Essentials
- 3D Examples
- Backgrounds
- Animated Backgrounds
- Background Patterns
- Fixed Backgrounds
- Particle Backgrounds
- Triangle Backgrounds
- Arrows
- Badges
- Blockquotes
- Borders
- Buttons
- 3D Buttons
- Animated Buttons
- Button Click Effects
- Button Hover Effects
- Button Libraries
- Close Buttons
- Download Buttons
- Floating Action Buttons
- Flat Buttons
- Ghost Buttons
- Gradient Buttons
- Multi (Group) Buttons
- Play/Pause Buttons
- Scroll Buttons
- Social Share Buttons
- Submit Buttons
- Cards
- Blog Cards
- Business Cards
- Card Hover Effects
- Credit Cards
- Flip Cards
- Material Design Cards
- Movie Cards
- Product Cards
- Profile Cards
- Recipe Cards
- Stacked Cards
- Color Palettes
- Corners
- Cubes
- Dividers
- Hexagons
- Links
- Lists
- Loaders
- Modal Windows
- Notifications
- Panels
- Progress Bars
- Progress Steps
- Ribbons
- Scroll Bars
- Speech Bubbles
- Spinners
- Spheres
- Timelines
- Titles
- Tooltips
- Triangles
Input
- Checkboxes
- Filter and Sort
- Forms
- Input Text
- Radio Buttons
- Range Sliders
- Search Boxes
- Select Boxes
- Star Ratings
- Toggle Switches
Layouts
Media
- Animated Counters
- App Design
- Avatars
- Banners
- Barcodes
- Calculators
- Calendars
- Carousels
- Charts and Graphs
- Chats
- Clocks
- Counters
- Countdown Timers
- Flowcharts
- Frames
- Galleries
- Games
- Icons
- Illustrations
- Image Effects
- Infographics
- iPhones
- Keyboards
- Logos
- Maps
- Music Players
- Picture-in-Picture
- Posters
- Skeleton Loading
- Sliders
- Slideshows
- Sprites
- Tables
- Testimonials
- Theme Switches
- Thumbnails
- Video
- Weather Widgets
Navigation
- Accordions
- Breadcrumbs
- Hamburger Menu Icons
- Dotted Menu Icons
- Footers
- Headers
- Hotspots
- Menus
- Circle Menus
- Dropdown Menus
- Fullscreen Menus
- Mega Menus
- Mobile Menus
- Sidebar Menus
- Horizontal Menus
- Off-Canvas Menus
- Sliding Menus
- Toggle Menus
- Pagination
- Tabs
- Tags
UI Design Styles
Other
- Bubbles
- Clouds
- Coins
- Data Visualization
- Halloween
- Pixel Art
- Solar Systems
- Studio Ghibli Characters
- Tickets
- Tree View
- Watches
Properties
- :active
- :nth-child()
- ::scroll-*
- @keyframes
- @property
- @starting-style
- Anchor Positioning
- backdrop-filter
- blend-mode
- background-clip
- box-shadow
- calc()
- clamp()
- clip-path
- Container Queries
- cubic-bezier
- custom properties (variables)
- drop-shadow()
- filter
- ::first-letter
- flexbox
- font variable
- gradient
- grid
- :has
- hue-rotate()
- light-dark()
- linear-gradient
- mask
- motion path
- position: sticky;
- preserve-3d
- Pseudo Elements
- scroll-driven
- scroll-state
- scroll-snap
- shape()
- shape-outside
- stroke-dashoffset
- subgrid
- text-stroke
- transition
- transform
- z-index