In the previous post, we’ve talked about CSS checkout forms templatesnavigation website menu, preloaders, loading & spinners CSS to beautify your website. Today, we’ve a huge collection of CSS3 snippet code that you can use to create beautiful website widget

Each snippet include detailed tutorial on how to implemented the source code. Even if you are beginner to codes, this tutorial will help you step by step until you complete your widget or CSS3 effect.

See Also: 14 CSS/HTML Button Templates

70Expanding overlay CSS effect

expanding_overlay_css_effect

A new amazing CSS snippet to produce an easy expanding overlay effect using the CSS clip property and CSS transitions.

DOWNLOAD

69Milky text effect with CSS

milky_text_effect_with_css

A good milky text effect made up of pure CSS. A code snippet by Jorge Epuñan.

DOWNLOAD

68Flexing pagination CSS

flexing_pagination_css

Flexing pagination is a fancy pagination test including a truly nice animation. Developed by hakimel.

DOWNLOAD

67CSSmatic a tool for designers

cssmatic_a_tool_for_designers

CSSmatic is a powerful device for assisting web designers to easily produce CSS gradients, border radius shapes, noise textures and package shadows.

DOWNLOAD

663D shading with box-shadows

3d_shading_with_boxshadows

This awesome tutorial is about how to create a 3D shading effect with box-shadows.

DOWNLOAD

65SideComments.js Medium style comments

sidecomments_js_medium_style_comments

SideComments.js is an interface component to give your site/app Medium.com design commenting system. Coded by Eric Anderson.

DOWNLOAD

64Animated page transition

animated_page_transition

A CSS driven animation, that replaces the refresh regarding the page while the content is updated making use of Ajax. A tutorial by CodyHome.

DOWNLOAD

63Settings panel PSD CSS

settings_panel_psd_css

Free PSD and HTML/CSS snippet of a settings panel with brushed metal interface elements / toggle switches.

DOWNLOAD

62uiGradients Color gradients tool

uigradients_color_gradients_tool

uiGradients is a helpful tool getting beautiful color gradients for the next design.

DOWNLOAD

61Product item hover effect

product_item_hover_effect

A fantastic product item CSS hover effect for eCommerce sites. It is made width both CSS and JavaScript.

DOWNLOAD

60Reading progress indicator widget

reading_progress_indicator_widget

a well written article including a quick tutorial about creating a learning progress indicator widget.

DOWNLOAD

59Flat iPhone with Next Post animation

flat_iphone_with_next_post_animation

A flat iPhone mockup made with few lines of CSS and jQuery featuring a truly good animation.

DOWNLOAD

58CSS + jQuery flat clock

css_jquery_flat_clock

A flat clock made up of some lines of HTML + CSS + jQuery. Coded by Marco Biedermann.

DOWNLOAD

573D hover effect with CSS3

3d_hover_effect_with_css3

An incredible 3D hover effect made up of only CSS3.

DOWNLOAD

56Textures.js SVG patterns

textures_js_svg_patterns

Textures.js is a JavaScript library for creating SVG patterns.

DOWNLOAD

553D folding panel in CSS

3d_folding_panel_in_css

A secondary content panel that folds flat, powered by CSS Transformations and jQuery.

DOWNLOAD

54Countdown flip clock CSS + jQuery

countdown_flip_clock_css_jquery

Practical countdown flip clock made out of few lines of CSS and jQuery. Created by Adem Ilter.

DOWNLOAD

53CSS clouds

css_clouds

A set of 3 clouds designed with only CSS3.

DOWNLOAD

52A fun text box made of CSS jQuery

a_fun_text_box_made_of_css_jquery

A notepad-style textbox composed of CSS and simply a couple of lines of jQuery.

DOWNLOAD

51Tumblr-style cog loaders CSS

tumblrstyle_cog_loaders_css

A Tumblr-style cog loader with CSS and SVG icons predicated on an icon set designed by Jiri Silha.

DOWNLOAD

50CSS dashed shadows

css_dashed_shadows

A snippet for creating pure CSS hipster-ish typographic dashed shadows.

DOWNLOAD

49Simple Typography: Sass boilerplate for beautiful typography

simple_typography_sass_boilerplate_for_beautiful_typography

Simple Typography is a simple typography boilerplate built with Sass and grunt which will also come in handy to begin with with a new web project.

DOWNLOAD

48Rain drops effect with WebGL

rain_drops_effect_with_webgl

A fascinating test by Codrops to generate a rain drop effect on your web pages with WebGL.

DOWNLOAD

47Styleguide: Living style guides made easy

styleguide_living_style_guides_made_easy

DOWNLOAD

46CSS page transitions

css_page_transitions

CSS web page transitions for producing interesting navigation effects when exposing a new page.

DOWNLOAD

45Fullscreen pageflip layout with HTML & CSS

fullscreen_pageflip_layout_with_html_css

Awesome fullscreen pageflip layout with HTML, CSS and the BookBlock plugin.

DOWNLOAD

44Metro Twitter feed widget CSS + PSD

metro_twitter_feed_widget_css_psd

A lovely Metro-style twitter feed made of CSS + the original PSD file. Containing different states for various tweets, links, and timing.

DOWNLOAD

43Effekt.css A collection of CSS effects

effekt_css_a_collection_of_css_effects

Effekt.css is a CSS transitions & animations collection grouping the best snippets in the web.

DOWNLOAD

42Animated text fills with CSS and SVG

animated_text_fills_with_css_and_svg

A tutorial on how best to produce various types of animated fills and shots for text using various methods including CSS and SVG.

DOWNLOAD

41Detox Free Ghost theme

detox_free_ghost_theme

Detoxification is a clean, minimal and free Ghost theme best suitable for web log and news websites. Coded by Jordan Bowman.

DOWNLOAD

40New subtle hover effects with CSS3

new_subtle_hover_effects_with_css3

Some new imaginative and subtle hover effects making use of modern CSS practices including 3D translate and pseudo elements.

DOWNLOAD

39Round calendar PSD + HTML

round_calendar_psd_html

A minimal and flat calendar consists of circles. Mcdougal Marco Biedermann has released both the PSD therefore the ready-coded widget.

DOWNLOAD

38CSSGram Instagram filters with CSS

cssgram_instagram_filters_with_css

A CSS library predicated on blend modes generate some cool photo effects prompted to Instagram filters.

DOWNLOAD

37Pure CSS3 wall analog clock

pure_css3_wall_analog_clock

An incredible wall surface analog clock made out of pure CSS3. Created by Nik Rassadin.

DOWNLOAD

36Points of interest CSS + JS

points_of_interest_css_js

Sights is a small snippet to highlight the points of interest of your services and products.

DOWNLOAD

35Techniques for creating separators

techniques_for_creating_separators

A collection of separator styles for horizontally dividing sections on a website.

DOWNLOAD

34CSS on/off switch

css_onoff_switch

A minimal and cool CSS on/off switch.

DOWNLOAD

33SVGeneration SVG patterns generator

svgeneration_svg_patterns_generator

SVGeneration is a habits generator for SVG. With this particular device, producing a background pattern with SVG is manufactured much easier.

DOWNLOAD

32Animo.js Tool for managing CSS animations

animo_js_tool_for_managing_css_animations

Animo.js is a powerful tool for handling CSS animations and creating stack animations, create cross-browser blurring, set callbacks on animation conclusion, etc.

DOWNLOAD

31Fullscreen overlay menu with CSS

fullscreen_overlay_menu_with_css

A tutorial for producing fullscreen overlay menu with CSS.

DOWNLOAD

30HTML5 device mockups

html5_device_mockups

Stunning showcases with your HTML5 mockups of popular products is really fast and simple.

DOWNLOAD

29Simple stack effects with CSS

simple_stack_effects_with_css

A couple of easy stack effects on thumbnails created with CSS.

DOWNLOAD

28Techniques for creating textured text

techniques_for_creating_textured_text

An interesting guide for creating image or texture filled text and show you just how to use them.

DOWNLOAD

27Mac OSX-like animated folder with CSS3

mac_osxlike_animated_folder_with_css3

A OSX-like folder with CSS3, by utilizing 3D transforms, gradients and box shadows.

DOWNLOAD

26iOS7 blurred header CSS+JS

ios7_blurred_header_cssjs

An iOS7-style blurred header made up of some lines of CSS and JS. This of good use snippet happens to be coded by Rik Schennink.

DOWNLOAD

25Responsive & expanding thumbnail grid

responsive_expanding_thumbnail_grid

A responsive thumbnail grid with an expanding image preview similar to the effect seen on Google Images.

DOWNLOAD

24Text styles and hover effects

text_styles_and_hover_effects

An innovative text designs and hover effects for the motivation. Some effects utilize experimental techniques including SVG masking and Canvas.

DOWNLOAD

23Long Shadows generator

long_shadows_generator

Long Shadows generator is a robust tool for creating custom CSS shadows.

DOWNLOAD

22Astrum: Pattern library for web projects

astrum_pattern_library_for_web_projects

Astrum is a lightweight pattern library for web tasks including numerous helpful components which can be easily handled and grouped through the command-line.

DOWNLOAD

21Weather loading animation

weather_loading_animation

A wonderful weather loading animation developed by Tim Holman for Authentic Weather with a few lines of HTML and CSS.

DOWNLOAD

208 CSS devices mockups

8_css_devices_mockups

A free device mockups made out of pure CSS including iPhone, Android, Lumia and iPad. Coded and released by Oleg.

DOWNLOAD

19CSS-only weather app concept

cssonly_weather_app_concept

A weather app concept based on Sergey Valiukh dribbble shot and constructed with pure CSS. A snippet by David Khourshid.

DOWNLOAD

18Pricing tables with HTML/CSS

pricing_tables_with_htmlcss

A precious collection of pricing tables coded with HTML and CSS and able to be utilized on your website.

DOWNLOAD

17Type Nugget: Web typography CSS generator

type_nugget_web_typography_css_generator

Type Nugget is a new device for generating stunning responsive web typography. It gives a settings panel, where you could adjust font settings individually for headings, paragraphs, links and listings.

DOWNLOAD

16Motion blur effect with SVG

motion_blur_effect_with_svg

A tutorial on how to create a motion blur effect on HTML elements utilizing JavaScript and an SVG blur filter.

DOWNLOAD

15CSS3 Pricing Tables

css3_pricing_tables

CSS3 pricing tables through the Impressionist UI, made by Vladimir Kudinov.

DOWNLOAD

14MocKit HTML iPhone 6 mockups

mockit_html_iphone_6_mockups

MocKit is a ready-made iPhone 6 mockup kit built with HTML and CSS. Customisable tints, size and always retina ready.

DOWNLOAD

13Notification alert modal windows with CSS3

notification_alert_modal_windows_with_css3

A collection of flat notification alert modal windows with pure CSS icons. The icons are made utilizing before/after pseudo-elements and CSS3 transform functions.

DOWNLOAD

12Simple toggle switch CSS

simple_toggle_switch_css

A straightforward toggle switch with subtle shadows and details created using CSS. Released by CSSFlow.

DOWNLOAD

11CSS Calendar concept

css_calendar_concept

A calendar app concept created with CSS only and prompted by Ludmila Shevchenkos dribbble shot.

DOWNLOAD

10Reveal.js Framework for HTML presentations

reveal_js_framework_for_html_presentations

Reveal.js is a framework for easily producing gorgeous presentations utilizing HTML. A project developed by hakimel.

DOWNLOAD

9Expandable image gallery

expandable_image_gallery

A graphic that expands on click, going full-width and turning into a gallery. A smart snippet by Codyhouse.

DOWNLOAD

8Fancy Banners CSS3

fancy_banners_css3

A pure CSS3 fancy text advertising making use of transforms, pseudo-elements, last-child, and much more.

DOWNLOAD

7Item transitions inspiration

item_transitions_inspiration

A couple of item transitions made making use of CSS animations that can be used for inspiration.

DOWNLOAD

6Notepad CSS snippet

notepad_css_snippet

A realistic notepad created using CSS3, with a lined paper background and concealed pages in the bottom.

DOWNLOAD

5CSS3 3D book showcase

css3_3d_book_showcase

3D publications on a rack made with some lines oh HTML and CSS. The theory is make publications look more practical by utilizing 3D transforms and apply some lighter moments effects in their mind, like rotating, flipping and starting.

DOWNLOAD

4iOS7 Toggles CSS

ios7_toggles_css

CSS snippet on Codepen is an iOS7-style toggle made out of CSS3. Developed by Joshua Hibbert.

DOWNLOAD

3CSSCO: CSS filters inspired by VSCO

cssco_css_filters_inspired_by_vsco

A small library of CSS photographic filters encouraged by VSCO and built by Lauren Waller.

DOWNLOAD

2Twitter Account Widget CSS + PSD

twitter_account_widget_css_psd

A small Twitter widget / profile field for your next design Twitter account widget.

DOWNLOAD

1Tooltip styles collection CSS + SVG

tooltip_styles_collection_css_svg

A collection of hover tooltip styles and effects. Utilizing CSS transforms, border-radius and SVG shapes we are able to produce modern looking and interesting tooltips.

DOWNLOAD

Powered by Shutterstock
SHARE

LEAVE A REPLY