Web Design Inspiration - HTML and CSS Snippets
Gradient Pull Quote as Seen on Polygon.com
This is a fancy pull quote effect that you can see on Polygon.com, it’s a great way to highlight a part of the text content on a page. This pure CSS snippet was designed by Matt Popovich. The text uses a gradient e ...Responsive Calendar in Fluent Design
Here is a calendar designed in Microsoft’s new Fluent Design Language, it was designed by Tom. ...Registration & Login Card UI Form
A fancy card UI form that can be used to show the signup and login form in your next web design project. When you click on the login button the card in the background moves to the front and shows you the login screen and ...Jagged Edge Accordion Tabs
Here is a cool snippet by Nikita Jadhao that reimagines the accordion tab with an unusual design. The edges of the tabs have a jagged end that gives it a unique look. ...Nested Drop-down Menu with CSS Animation
Here is a cool nested drop-down navigation menu that uses only CSS for animation. It was designed by Gabrielle Wee. When you click on the menu button, the rest of the navigation menu drops down and there are some of thos ...Multicoloured Pure CSS Tooltips
This snippet designed by Samuel Janes is great if you want to show tooltips on your next web design project. These are in pure CSS and you have the option to show images or text in them. When you hover over the buttons t ...Image Glitch Effect Using OpenGL Shading Language
In this snippet, we see a glitch effect on top of an image created using three.js. It was designed by Yoichi obayashi. This is perfect if you want to show a glitch effect for a live video feed or something similar on you ...Various Text Styles in CSS
Here are some simple text effects you can create using pure CSS, it was designed by Matt Schneider. The styles you have to choose from include: Outline Engraved Embossed Rainbow Shadow White Border Sticker Thick Shadow ...Wonky Rise Up CSS Tooltip on Hover
We have seen many tooltip designs here, this pure CSS tooltip was designed by Sasha. When you hover over the ? icon a tooltip appear with a wobbly animation and reveals the content. ...
