Add alternative text to CSS generated images
Use the slash syntax of the CSS content property to provide replacement text for generated images while keeping meaningful content in HTML.
CSS Tips by Theo Soti for Web and Frontend Developers
Theosoti is a frontend blog sharing CSS tutorials, practical guides, and bite-sized tips on modern web development and UI design.
Latest posts
Build accessible accordions with details and summary
Use the native details and summary elements for keyboard-friendly accordions, then add a smooth CSS Grid animation without replacing their semantics.
Create reusable CSS logic with @function
Define reusable custom CSS functions for calculations, colors, and fluid values without repeating the same expressions across a stylesheet.
Replace six typography declarations with the CSS font shorthand
Combine font style, variant, weight, size, line height, and family in one font declaration, while avoiding the shorthand reset trap.
Animate elements along a path with CSS Motion Path
Use offset-path, offset-distance, and offset-rotate to move an element along a curve or custom SVG path without animating left and top.
Build dark mode with CSS only
Create a CSS-only dark mode with a checkbox and :has(), follow the system preference, or let light-dark() select theme-aware colors.
Apply hover styles only when a device can hover
Use the CSS hover media feature to avoid mouse-only interactions on touchscreens and provide appropriate behavior for each input type.
Understand every CSS object-fit value
Control how images and videos fill a fixed media box with the five object-fit values: fill, contain, cover, none, and scale-down.
Transition an element to its natural height in CSS
Compare the practical CSS techniques for animating dynamic height, including Grid, interpolate-size, and calc-size(), without guessing max-height.
CSS if(): Conditional Styling Without JavaScript
Use the CSS if() function to choose property values from style, media, and support queries without writing JavaScript state glue.
CSS Anchor Positioning: Tooltips and Dropdowns Without JavaScript Math
A modern CSS guide to Anchor Positioning for popovers, tooltips, and dropdowns without getBoundingClientRect, scroll listeners, or layout JavaScript.
Open Dialogs and Popovers Without JavaScript Using commandfor
Use HTML command and commandfor to control dialogs and popovers declaratively, with less JavaScript and native browser behavior.
Build an animated perspective grid in pure CSS.
Layer two linear gradients, tilt with a 3D perspective transform, fade with a mask, and animate the background position. No JS, no images, just CSS.
How to Use @starting-style in CSS for Entry Transitions
Use @starting-style for modern CSS entry transitions on dialogs, popovers, drawers, and display:none elements without JavaScript timing hacks.
You can now style browser find-in-page matches in CSS.
Style browser find-in-page matches with CSS ::search-text and :current. Support is limited, so treat it as progressive enhancement.
You can now create true randomness in CSS.
CSS random() lets you generate values inside a range and share random base values across properties. Powerful idea, but support is still limited.
HTML in Canvas API Explained: Render HTML Inside Canvas
Explore the experimental HTML in Canvas API, which renders real HTML inside canvas while preserving DOM interaction and accessibility.
How to Create Animated Gradient Borders in CSS
Animated gradient borders are easier with modern CSS: conic gradients, pseudo-elements, and @property replace JavaScript-heavy tricks.
Shrink a sticky header only when it sticks. In CSS.
Use CSS scroll-state queries to shrink a sticky header only after it becomes stuck. A cleaner way to build adaptive headers without scroll listeners.
You can now detect when sticky is actually stuck. In CSS.
Use CSS scroll-state queries to style a sticky element only when it is actually stuck to the top. No scroll listener, no class toggle, no JavaScript.
Your slider can now know the active card. In CSS.
Use CSS scroll-state queries to detect the snapped slide in a carousel and style the active card without Intersection Observer, scroll listeners, or JavaScript.
Reset Form Inputs Natively with button type="reset"
Use the native reset button to restore inputs, selects, checkboxes, and validation state without JavaScript. A simple HTML feature that is still easy to forget.
Fix z-index leaks with CSS isolation: isolate
Use isolation: isolate to create a new stacking context and keep pseudo-elements, blend effects, and negative z-index layers inside their component.
React to Scroll with CSS Scroll State Queries
Use CSS scroll state queries to style elements based on scroll position. Detect top, bottom, or scrolling states without JavaScript or scroll listeners.
CSS Relative Colors: Build Palettes Without Color Pickers
CSS relative colors turn one base color into hover states, borders, shadows, and accents, a practical modern CSS pattern for UI systems.
Align Numbers Perfectly with CSS tabular-nums
Use CSS tabular-nums to align numbers in tables, dashboards, prices, and stats for cleaner, more readable interfaces and layouts.
Create a Mirror Reflection Effect with CSS box-reflect
Create a mirror reflection effect in CSS with -webkit-box-reflect and add glossy image reflections with a single property and graceful fallback.
CSS corner-shape: Shape Corners Beyond border-radius
Learn the CSS corner-shape property to create scoop, bevel, squircle, and custom corners beyond border-radius with progressive enhancement.
Position Elements with CSS sibling-index()
Learn how CSS sibling-index() lets elements position themselves based on sibling order. Use pure CSS math for layouts without JavaScript or nth-child selectors.
When Relative Units Behave Differently: EM vs REM in CSS
Learn the difference between CSS em and rem units, when to use each one, and how they affect scalable typography, spacing, and layouts.
Designing Better CSS Box Shadows Easily
Better box shadows start with light direction, layering, and color. This modern CSS guide shows how to make UI depth feel less fuzzy.
Scroll-Driven Animations in CSS with @starting-style
Learn how to combine entry animations and scroll-driven motion using modern CSS. Use @starting-style, custom properties, and scroll timelines.
My Iterative Process to Design a Book Cover
A behind the scenes look at how I designed my ebook cover, from AI drafts and Photopea mockups to a clean, minimal design style.
Build a Masonry Layout with Pure CSS column-width
Create responsive Masonry layouts using the CSS column-width property. Fit flexible columns automatically, no JavaScript or grid hacks—just clean, native CSS.
Responsive Components with CSS Container Queries
Use CSS container queries to make components respond to their parent’s size, not the viewport. Create adaptive layouts and icons with clean, modern CSS.
Style Scrollbars with CSS scrollbar-color & scrollbar-width
Customize scrollbars to match your UI using scrollbar-color and scrollbar-width. Control colors, size, and accessibility. All with just two CSS properties.
CSS image-rendering: pixelated. Scale Pixel Art Without Blur
Preserve sharp edges when scaling pixel art, icons, retro screenshots, or QR codes using one line of CSS supported by modern browsers.
Create Multi-Column Layouts with CSS Columns
Build column layouts with the CSS columns property. Add spacing, separators, and spanning elements in just two lines of code.
CSS backdrop-filter: Frosted Glass Effect Made Easy
Enhance your UI with the CSS backdrop-filter property. Apply blur, brightness, or contrast for sleek frosted-glass effects.
Crisp Background Images with CSS image-set()
Serve sharp, responsive backgrounds with CSS image-set(). Let browsers choose the right asset for retina or standard screens efficiently.
Pure CSS Typing Animation Effect without JavaScript
Create a smooth typing text animation using pure CSS with keyframes, steps(), overflow, and a blinking caret. No JavaScript required.
CSS Moving Background Text Effect without JavaScript
Learn how to animate text with a moving background using only CSS. A lightweight effect with background-clip, keyframes, and zero JavaScript.
CSS clamp(): Responsive Design Without Media Queries
Learn how CSS clamp() creates fluid, responsive layouts by defining min, preferred, and max values—reducing media queries with 95% browser support.
CSS @property: Animate and Validate Custom Variables
Learn how CSS @property upgrades custom variables with validation, debugging, and animation support. A must-have feature for cleaner, more powerful CSS.
Native CSS Nesting vs Preprocessors, no more excuses
CSS nesting is now natively supported with 91% browser coverage. Learn why you may not need Sass preprocessors anymore and how to switch smoothly.
Dynamic Layouts with CSS :has() without JavaScript
Learn how to build interactive layouts using CSS :has() and :checked. Create dynamic grids, galleries, and dashboards without JavaScript.
CSS @scope: Encapsulated Styles Without CSS-in-JS
Discover how CSS @scope lets you limit style leakage, write cleaner HTML, and gain true encapsulation—no BEM, utility classes, or CSS-in-JS needed.
HTML inert: Disable Interactions and Improve Accessibility
Learn how the HTML inert attribute blocks interactions, hides content from screen readers, and improves accessibility for modals and pop-ups.
Custom List Bullets in CSS with @counter-style
Discover how to customize each list bullet in CSS using @counter-style and list-style-type. Unique symbols, emojis, or characters in just a few lines.
CSS Light Sweep Animation for Cards without JavaScript
Learn how to create a smooth light sweep effect on cards using only CSS gradients and keyframes. Simple, reusable, and no JavaScript required.