10+ Modern CSS Properties Every Developer Should Know (2026 Guide)

Advanced UI Kit

11 Modern CSS Properties for Pro UI

Enhance your Website's UI/UX with these hidden CSS gems by FAMOUSCODE.DEV.

01. Caret-Color

Customizes the blinking text cursor color.

input { caret-color: #f43f5e; }

02. Accent-Color

Themes native checkboxes and radio buttons.

input { accent-color: #10b981; }

03. Tap-Highlight-Color

Removes the annoying blue box on mobile clicks.

TAP ME ON MOBILE

* { -webkit-tap-highlight-color: transparent; }

07. Scrollbar-Width & Display

Allows you to hide the scrollbar while keeping the scrolling functionality active. Perfect for clean sidebars or horizontal lists.

Scroll me horizontally → No visible scrollbar here! This looks much cleaner.

.hide-scroll::-webkit-scrollbar { display: none; }

08. Object-Fit

Fixes distorted images! object-fit: cover ensures your images fill the box perfectly without stretching or losing their ratio.

img { object-fit: cover; width: 100%; height: 100%; }

09. Aspect-Ratio

Forces an element to maintain a specific proportion (like 16:9 for video). This prevents layout shifts while the page loads.

16:9 Aspect Ratio Box

.video-container { aspect-ratio: 16 / 9; }

10. Pointer-Events

Allows you to control if an element can be clicked. pointer-events: none makes an element invisible to mouse clicks, letting them "pass through."

.disabled { pointer-events: none; }

11. Scroll-Behavior

Makes navigation between page sections smooth. Instead of a sudden jump, the browser will smoothly slide to the target location.

Commonly applied to the whole HTML document for a premium feel.

html { scroll-behavior: smooth; }

Create Password Toggle Button using HTML CSS | Show/Hide Password Input

Modern Password Show/Hide Toggle | HTML and CSS Tutorial - FAMOUSCODE.DEV Modern Password Show/Hide Toggle (HTML & CSS) Boost your login form UX with this simple yet powerful visibility toggle component. ✨ Live Preview FAMOUSCODE Show Password 💻 Full Source Code Copy the production-ready code for your next project. Copy Code Password Toggle - FamousCode FAMOUSCODE Show Password 🔍 How it Works? The logic is simple but effective. We use a JavaScript event listener to detect changes on the checkbox. When the state is checked , we dynamically change the input's type attribute from password to text . This reveals the characters to the user, ensuring they've typed the correct credentials. ...

3D Social Media Icons Hover Effect using HTML CSS

Premium 3D Social Media Icons Hover Effect | HTML And CSS - FAMOUSCODE.DEV UI/UX DESIGN 3D Social Media Icons Hover Effect Create premium 3D social icons with smooth isometric animation. 🖼️ Visual Preview 💻 Complete Source Code Copy Full Code 📖 Technical Explanation In this project, we utilize the CSS Transform property combined with perspective to create a depth effect. The 3D walls are created using ::before and ::after pseudo-elements, which are skewed to match the isometric angle of the main icon box. Want more premium UI code? Follow @famouscode.dev Article curated by Mohd Rihan

How to Add a Modern Reading Progress Bar to Blogger (HTML & CSS)

Custom Scroll Progress Box | FAMOUSCODE.DEV UI Architecture Scroll-Sync Progress Container Enhance your user interface by syncing scroll position with a sticky progress indicator. Interactive Preview Scroll down to see the magic... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Neque porro quisquam est, qui d...

Create a Custom Right-Click Context Menu: Modern HTML & CSS Tutorial

UI Masterclass Custom Right-Click Context Menu Replace the boring browser menu with a premium, animated custom menu using simple CSS. Right-Click anywhere inside this box! ✨ Refresh Page 📂 View Source 🔒 Close Menu custom-menu.html Copy Code  <div id="container" style="height: 100vh;"> <ul id="menu" style="display: none; position: absolute;"> <li>Refresh</li> <li>Copy</li> </ul> </div> <script> const menu = document.getElementById('menu'); // 1. Detect Right Click window.addEventListener('contextmenu', (e) => { e.preventDefault(); // Stop default menu menu.style.display = 'block'; menu.style.left = e.pageX + 'px'; menu.style.top = e.pageY + 'px';...

Pure CSS Form Validation using :has() Selector (2026 Guide)

Advanced Pure CSS Form Validation Revolutionize your Web UI with the power of :has() and :invalid selectors. No JavaScript required! Why Pure CSS Validation is Trending in 2026 Web performance is the number one ranking factor today. By eliminating heavy JavaScript for simple tasks like form validation, you significantly reduce the First Input Delay (FID) and improve your site's SEO score. The :has() selector is a game-changer, allowing us to style parent elements based on input states effortlessly. ⚡ Lightning Fast Instant validation feedback without waiting for scripts to load. 🔒 Secure & Reliable Built-in browser logic ensures consistent behavior across modern platforms. 📱 Mobile Optimized Perfect fo...

How to Build a Modern Glassmorphism Navbar with Spotlight Effect

Ultra-Modern Glass Navigation In this tutorial, we are using the backdrop-filter CSS property to create a professional frosted glass look. We also added a Dynamic Spotlight that follows your mouse. Home Projects Services Contact Full Source Code index.html Copy Code <!DOCTYPE html> <html> <head> <style> body { background: #000; display: flex; justify-content: center; padding-top: 100px; } .glass-nav { display: flex; gap: 15px; padding: 10px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 100px; position: relative; } .link { color: #fff; text-decoration: none; padding: 10px 25px; font-family: sans-serif; font-size: 15px; border-radius: 50px; transition: 0.3s; } .link:hover { background: rgba(255, 255, 255, ...

How to Create a Modern Toggle Navigation Menu with Pure HTML & CSS

Full Project Code Responsive Toggle Navigation Menu Copy and paste this complete code into your project for a professional floating menu. Home About Contact Click the icon to test the toggle complete-source-code.html Copy Code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Toggle Menu - FamousCode</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } body { background: #f0f2f5; display: flex; justify-content: center; padding-top: 100px; } .navbar { position: relative; } .toggle-btn { background: #fff; border: 1px solid #ddd; width: 50px; height: 50px; border-radius: 10px; cursor: ...

How to Build a 3D Flipping Glassmorphism Credit Card with CSS

Premium 3D Glassmorphism Credit Card Create a realistic 3D Flipping Card with Glassmorphism effects. Perfect for adding a premium touch to your web projects. **** **** **** 5678 FAMOUSCODE.DEV 999 AUTHORIZED SIGNATURE REQUIRED Full Source Code index.html Copy Full Code <!DOCTYPE html> <html lang="en"> <head> <style> body { background: #0f172a; display: flex; justify-content: center; align-items: center; height: 100vh; perspective: 1000px; margin: 0; } .card { width: 300px; height: 180px; position: relative; transition: 0.8s; transform-style: preserve-3d; cursor: pointer; } .card:hover { transform: rotateY(180deg); } .side { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radiu...

How to Create a Typing Animation for Input Placeholders

How to Create Dynamic Typing Placeholder in HTML/JS - FAMOUSCODE.DEV Dynamic Typing Animation Level up your forms with a smooth typing placeholder effect using pure Vanilla JavaScript . No heavy libraries, just clean code by Mohd Rihan . 🚀 Interactive Preview Experience the "Typing" feel in real-time. 💻 Get the Source Code INDEX.HTML COPY CODE  <input id="type-input" placeholder="|"> <script> const target = document.getElementById('type-input'); const hints = ['Enter Full Name', 'Enter @Instagram', 'Enter Email ID']; let wordIndex = 0, charIndex = 0, isWaiting = false; setInterval(() => { if (isWaiting) return; target.placeholder = hints[wordIndex].slice(0, ++charIndex) + '|'; if (charIndex > hints[wordIndex].length) { isWaiting = true; ...

Famous Code Dev

Search This Blog