CSS

150+ CSS Cards Layouts with Code and Demos

Byfrontend October 18, 2023December 30, 2024

Title:- OL Circle Cards
Author:-Mark Boots
Made with:-HTML CSS JS

Title:- Profile Cards – CSS Grid
Author:-Alina N.
Made with:-HTML CSS JS

Title:- Shiny Debit Card
Author:-Jon Kantner
Made with:-HTML CSS JS

Title:- CSS leaning card effect
Author:- Lynn Fisher
Made with:-HTML CSS JS

Title:- Figure + Figcaption
Author:-Jøshüå Wård
Made with:-HTML CSS JS

Title:- Player/User Cards
Author:-Alvaro Montoro
Made with:-HTML CSS JS

Title:- CSS Backlit Card
Author:-Amit Sheen
Made with:-HTML CSS JS

Title:- Pure CSS Responsive Animated Info Card
Author:-Chris Smith
Made with:-HTML CSS JS

Title:- Glassmorphism UI Card
Author:-Coding Artist
Made with:-HTML CSS JS

Title:- CSS Card Hover Effects
Author:-Jhonier Riascos Zapata
Made with:-HTML CSS JS

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

CSS

30+ CSS Circle menu example (updated)
Byfrontend February 18, 2024February 18, 2024

Boost user engagement and conversion with these 30+ eye-catching CSS circle menus! Find the perfect design, learn the code, and enhance your website’s usability. 1. Radial / Circular Menu Concept by Glenn McComb See the Pen Radial / Circular Menu Concept bylenymo(@lenymo) on CodePen. Author: Glenn McComb Links: Source Code / DemoMade with: HTML CSS…

Read More 30+ CSS Circle menu example (updated)
CSS

35+ Responsive CSS Flowcharts Example
Byfrontend March 3, 2024March 3, 2024

Explore a collection of 25+ eye-catching Responsive CSS flowcharts with free code and live demos. Easily visualize processes and enhance your website’s user experience with these customizable flowcharts. 1. CSS Grid Responsive Flowchart by Chris Droom See the Pen CSS Grid Responsive Flowchart bydroom(@droom) on CodePen. Author: Chris Droom Links: Source Code / DemoMade with:…

Read More 35+ Responsive CSS Flowcharts Example
CSS

15+ CSS Triangle Backgrounds from CodePen
Byfrontend October 18, 2023October 20, 2023

Learn how to create your own CSS triangle backgrounds with these easy-to-follow examples. RELATED ARTICLES See the Pen Infinite SVG Triangle Fusion by robdimarzo (@robdimarzo) on CodePen. Title:- Infinite SVG Triangle Fusion Author:-Rob DiMarzo Made with:-HTML CSS JS See the Pen Animated Triangles by flugg (@flugg) on CodePen. Title:- Animated Triangles Author:-Flugg Made with:-HTML CSS…

Read More 15+ CSS Triangle Backgrounds from CodePen
CSS

Top 40+ Best CSS Glass Morphism from CodePen
Byfrontend October 18, 2023October 18, 2023

I’m sure you are familiar with CodePen. It’s a great place to create and share CSS code snippets. I’ve been using it for a long time and have learned a lot about prototyping images and creating other UI elements. If you’re interested in learning new methods of CSS development, then check out 40+ Best CSS…

Read More Top 40+ Best CSS Glass Morphism from CodePen
CSS

HOW TO: CSS Blur Background with 40+ Examples
Byfrontend October 18, 2023October 20, 2023

See the Pen CSS blur background by XiChen (@xichen) on CodePen. Title :- CSS blur backgroundAuthor :- XiChenMade with:- CSS HTML See the Pen Newsletter Box Using Only HTML & CSS blur background by DEV Code (@DEVCodes) on CodePen. Title :- Newsletter Box Using Only HTML & CSS blur backgroundAuthor :- DEV CodeMade with:- CSS…

Read More HOW TO: CSS Blur Background with 40+ Examples
CSS

Top 20+ Animated Confetti Backgrounds from CodePen
Byfrontend October 18, 2023October 20, 2023

Top 20+ animated confetti backgrounds! With a variety of colors, styles, and effects to choose from, you’re sure to find the perfect one for your next project. RELATED ARTICLES See the Pen CSS Variables – Pitchfork Artist Profile Concept by Mauricio Palma (@palmaswell) on CodePen. Title:- CSS Variables – Pitchfork Artist Profile ConceptAuthor:- Mauricio PalmaMade…

Read More Top 20+ Animated Confetti Backgrounds from CodePen