CSS Gradient Button
A multi-layered button where the background, border, and pseudo-elements are styled with different linear-gradients. A SCSS mixin, @mixin buttonLayer, is used for reusing the styles of the pseudo-elements.
Badge Made With CSS
The badge uses background: rgba() and backdrop-filter: blur(10px) to create a translucent, frosted look. A double layer with ::before adds depth and enhances the blur effect.
Badge
An interactive hover animation that separates elements in 3D space. On container hover, one element animates with transform: rotateX(70deg), while another gets a grow animation, creating an effect of depth and dynamism.
Animated Triangles
An interactive animation on hover where triangles smoothly change their shape. The effect is achieved by animating the border-width property - when hovering over the .wrap container, the transparent borders of the triangles become colored, and vice-versa.
Cool 3D Text
This pseudo-3D text effect is achieved purely through multilayered text-shadow with sequential displacement, simulating depth. Upon hover, the shadows are inverted and combined with a transform: scale(1.1), creating a dynamic pop-up illusion.
Shape Zoom Transition
A cinematic image transition powered by CSS mask-image, featuring a vector-based shape zoom effect to reveal underlying content. This performant snippet demonstrates advanced manipulation of mask-size and filter properties, offering a sleek, JavaScript-free solution for creative storytelling and immersive web design.
Dynamic Noise Background with Highlighted Title
A creative 3D text highlight effect built with SCSS and advanced CSS transformations like perspective and skew. This snippet incorporates an SVG noise filter for organic texture and delivers a fluid interactive experience optimized for high frontend performance and unique UI design.