Daily dose of inspiration! The best HTML, CSS, and JS snippets for your projects. Grab the ready code and use it.
Joined August 2014
- Tweets 2,125
- Following 72
- Followers 3,025
- Likes 5,583
1,692 Photos and videos
heerich.js. 3D voxels in SVG. Zero dependencies. Mechanics stripped to raw geometry and boolean operations. Open vectors instead of a canvas black box. Structure exposed. Pure logic.
meodai.github.io/heerich/
2
116
CSS direction aware effects collection for interactive UI design. Download free code for mouse-tracking hover animations. View HTML/CSS CodePen demos.
freefrontend.com/css-directi…
2
130
SVG is a transparent DOM, not a static image. Carmen Ansio strips the format to pure logic: coordinate systems, raw shapes, and CSS manipulation. Expose the mechanics, drop the visual tools, and write the code.
carmenansio.com/articles/svg…
132
Explore our updated collection of CSS book effects. Download free 3D book covers and page-turning animations. View HTML/CSS code and CodePen demos.
freefrontend.com/css-book-ef…
1
1
112
Apr 14
CSS Blur Effects collection for modern UI design. Download free Glassmorphism and backdrop-filter code snippets. View updated CodePen demos.
freefrontend.com/css-blur-ef…
1
1
534
Apr 14
CSS Fire Animations collection for creative UI design. Download free realistic flame effects and particle systems. View HTML/CSS code and CodePen demos.
freefrontend.com/css-fire-an…
1
1
157
Apr 14
Explore our updated CSS Blob Animations collection. Download free code for fluid morphing shapes and organic UI design. View CodePen demos.
freefrontend.com/css-blob-ef…
1
108
Mar 31
CSS Reveal Animations collection for engaging UI design. Explore scroll-triggered effects and text appearances. Download free HTML/CSS code or view CodePen demos.
freefrontend.com/css-reveal-…
1
104
Mar 31
CSS Animations collection for modern UI design. Explore performant keyframe effects and transitions. Download free HTML/CSS code or view CodePen demos.
freefrontend.com/css-animati…
88
Mar 31
Asymmetric SVG Mask Grid Gallery
[SVG HTML CSS]
It builds a complex, interlocking masonry-style mosaic using CSS Grid areas, applying organic SVG masks to each thumbnail.
Source code: freefrontend.com/code/asymme…
75
Mar 31
Reveal Animated Hero Slider
[HTML CSS JS]
It cycles through prominent featured content using synchronized transitions.
Source code: freefrontend.com/code/reveal…
1
1
58
Mar 31
SVG Perimeter Progress Upload Button
[SVG HTML CSS JS]
It merges the primary action trigger and progress indicator into a single UI component.
Source code: freefrontend.com/code/svg-pe…
57
Mar 30
Tilting Diamond Range Slider Effect
[HTML CSS JS]
JS links slider value to 3D rotation. Hardware-accelerated CSS transforms create the tilt. Efficient and responsive.
Source code: freefrontend.com/code/tiltin…
#webdesign #webdevelopment #css #javascript #ui
1
2
71
Mar 30
Responsive Fluid Photo Gallery Grid
[HTML CSS JS]
Pure CSS Grid and object-fit create a gapless, fluid layout. Zero media query hacks. Clean structural logic.
Source code: freefrontend.com/code/respon…
113
Mar 30
Interactive Canvas Particle Image Effect
[HTML CSS JS]
JS renders image data as particles on a canvas. Direct GPU interaction. Bypasses the DOM for max performance.
Source code: freefrontend.com/code/intera…
1
1
55
Mar 30
CSS Grid Lightbox Gallery Effect
[HTML CSS JS]
JS toggles the active state. CSS Grid and transforms handle expansion. Zero layout thrashing.
Source code: freefrontend.com/code/css-gr…
60
Mar 30
Dynamic Data-Driven Tag Cloud Component [HTML CSS JS]
JS calculates tag positions in 3D space. Hardware-accelerated transforms drive the animation. Minimal DOM manipulation.
Source code: freefrontend.com/code/dynami…
1
1
52
Mar 29
82 Pure CSS 3D Transform Examples
This updated collection aggregates high-performance solutions for adding depth and spatial interaction to web interfaces.
➡️ freefrontend.com/css-3d-tran…
1
2
64
Mar 29
SVG Filter Noise Mask Squircle Layout
[SVG CSS]
Procedural texture. SVG filter generates noise. CSS clip-path creates the squircle shape. Zero image assets. Infinitely scalable.
Source code: freefrontend.com/code/svg-fi…
66
Mar 29
Resizing Tab Bar with Anchor Positioning
[HTML CSS]
Zero JS logic. New CSS anchor positioning links indicator to active tab. Browser engine calculates size and position. High performance.
Source code: freefrontend.com/code/resizi…
1
1
1
121