CSS Tips and Tricks

A collection of CSS tricks to tackle various problems.

Use the Border-Radius CSS Property to Define Horizontal and Vertical Radius
Explore a Site's CSS with Chrome DevTools CSS Overview
Create an Animated Underline Effect using CSS Transition and CSS Background Position
Use the HSL Color Space and Scoped CSS Variables to Prototype UI Variants
Use content-visibility: auto to Improve Initial Page Load Time
Use CSS @keyframes to Create a Basic Loading Animation
Use CSS filter to Create a Drop Shadow
Use CSS pseudo-elements and mix-blend-mode to Create a Duotone Style Effect
Use CSS Variables to Maintain the Aspect Ratio for an Element
Use Multiple Background Images to Create Single Element CSS Art
Use CSS Variables Almost like Boolean Values with Calc
Use CSS Transforms to Create Configurable 3D Cuboids
Use CSS Variables with Calc and HSL to Implement Dark Mode
Use CSS Scroll Behavior for Animated Anchor Scrolls
Use CSS Scroll Margin to Give Content Breathing Room
Use CSS @property to Animate and Transition Custom Properties
Use CSS Resize to Create Resizable Elements
Use CSS aspect-ratio to prescribe an aspect ratio for an element