CSS Articles

Written by Temani Afif

Temani Afif avatar

My name is Temani Afif and I am a CSS addict writing articles for CSS Tricks, Smashing Magazine, Verpex, Freecodecamp, Frontend Masters, Sitepoint, and DEV. Yes, I have an RSS feed

Do you want to support me? Buy me a coffee

Don't know what to read? Get a random CSS article

I am also the developer behind: CSS Loaders | CSS Tip | CSS Shape | CSS Challenges | CSS Generators | CSS Pattern | CSS Games | CSS Art

Better CSS Shapes Using shape() — Part 1: Lines and Arcs

Better CSS Shapes Using shape() — Part 1: Lines and Arcs

Creating Blob Shapes using clip-path: shape()

Creating Blob Shapes using clip-path: shape()

Creating Flower Shapes using clip-path: shape()

Creating Flower Shapes using clip-path: shape()

Custom progress element using the attr() function

Custom progress element using the attr() function

A CSS-Only Star Rating Component and More! (Part 2)

A CSS-Only Star Rating Component and More! (Part 2)

A CSS-Only Star Rating Component and More! (Part 1)

A CSS-Only Star Rating Component and More! (Part 1)

How to Create Wavy Boxes Using CSS

How to Create Wavy Boxes Using CSS

Full-Bleed Layout with Modern CSS

Full-Bleed Layout with Modern CSS

Fancy Menu Navigation Using Anchor Positioning

Fancy Menu Navigation Using Anchor Positioning

How to Create a Zig-Zag Box Using CSS

How to Create a Zig-Zag Box Using CSS

How to Create Zig-Zag CSS Loaders Using One Element

How to Create Zig-Zag CSS Loaders Using One Element

Custom Progress Element Using Anchor Positioning & Scroll-Driven Animations

Custom Progress Element Using Anchor Positioning & Scroll-Driven Animations

How to Create Filling CSS Loaders Using One Element

How to Create Filling CSS Loaders Using One Element

Curved and Rounded Edge Shapes Using CSS

How to Create Curved-Edge and Rounded-Edge Shapes Using CSS

CSS Tricks That Use Only One Gradient

CSS Tricks That Use Only One Gradient

How to create Shapes with Inner Curves using CSS Mask

How to create Shapes with Inner Curves using CSS Mask

Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations

Custom Range Slider Using Anchor Positioning & Scroll-Driven Animations

How to Get the Width/Height of Any Element in Only CSS

How to Get the Width/Height of Any Element in Only CSS

How Keyboard Navigation Works in a CSS Game

How Keyboard Navigation Works in a CSS Game

How To Create Cut-Out Shapes using The clip-path property

How To Create Cut-Out Shapes using The clip-path property

The Modern Guide For Making CSS Shapes

The Modern Guide For Making CSS Shapes

CSS Shapes

css-shape.com: The Ultimate Collection of CSS-only Shapes

Sliding 3D Image Frames In CSS

Sliding 3D Image Frames In CSS

CSS Tricks To Master The clip-path Property

CSS Tricks To Master The clip-path Property

Creating Wavy Circles with Fancy Animations in CSS

Creating Wavy Circles with Fancy Animations in CSS

Modern CSS Tooltips And Speech Bubbles

Modern CSS Tooltips And Speech Bubbles (Part 2)

CSS tooltip collection

Do you need a Tooltip or a Speech Bubble? I have created 100 using CSS 😲

Modern CSS Tooltips And Speech Bubbles

Modern CSS Tooltips And Speech Bubbles (Part 1)

Creating Flower Shapes using CSS Mask & Trigonometric Functions

Creating Flower Shapes using CSS Mask & Trigonometric Functions

CSS Shapes: The Triangle

CSS Shapes: The Triangle

The Complex But Awesome CSS border-image Property

The Complex But Awesome CSS border-image Property

CSS Tricks to add 3D Effects to your Text

CSS Tricks to add 3D Effects to your Text

CSS Responsive Multi-Line Ribbon Shapes

CSS Responsive Multi-Line Ribbon Shapes (Part 2)

CSS Responsive Multi-Line Ribbon Shapes

CSS Responsive Multi-Line Ribbon Shapes (Part 1)

CSS Ribbon collection

I have made 100+ CSS-only Ribbon Shapes | The Perfect Collection 🎀

How to create a CSS-only infinite scroll animation

How to create a CSS-only infinite scroll animation

Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 2)

Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 2)

Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1)

Re-Creating The Pop-Out Hover Effect With Modern CSS (Part 1)

How to Create CSS Ribbon Shapes with a Single Element

How to Create CSS Ribbon Shapes with a Single Element

CSS Ribbon Shapes

CSS Shapes: The Ribbon

Revealing Images With CSS Mask Animations

Revealing Images With CSS Mask Animations

CSS Loaders: 500+ single element loaders

css-loaders.com: The Biggest Collection of Loading Animations (more than 500 🤯)

How To Define An Array Of Colors With CSS

How To Define An Array Of Colors With CSS

CSS effects on images II

CSS effects on images II

Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images

Shines, Perspective, And Rotations: Fancy CSS 3D Effects For Images

What's your Lucky CSS Pattern? Check It Now!

What's your Lucky CSS Pattern? Check It Now!

How to Add a CSS Reveal Animation to Your Images

How to Add a CSS Reveal Animation to Your Images

Modern Layouts using CSS Grid

Modern Layouts using CSS Grid

CSS Tip: learn CSS the easy way!

I created 100+ unique CSS patterns | The best collection 🤩

CSS Shapes: The Heart

How to Create a Custom Range Slider Using CSS

CSS Shapes: The Heart

CSS Shapes: The Heart

CSS Shapes: Polygon & Starburst

CSS Shapes: Polygon & Starburst

How to build a CSS-only accordion

A Text Reveal Animation using CSS

CSS Tip: learn CSS the easy way!

CSS Tip: learn CSS the easy way!

How to build a CSS-only accordion

How to build a CSS-only accordion

How to create Breadcrumb Navigation with CSS

How to create Breadcrumb Navigation with CSS

Different Ways to Get CSS Gradient Shadows

Different Ways to Get CSS Gradient Shadows

A CSS-only responsive Stepper component

A CSS-only responsive Stepper component

A Fancy Hover Effect For Your Avatar

A Fancy Hover Effect For Your Avatar

How to make a zoom effect using CSS

How to make a zoom effect using CSS

Creating a Custom Cursor using CSS

Creating a Custom Cursor using CSS

CSS Infinite 3D Sliders

CSS Infinite 3D Sliders

CSS Infinite Slider Flipping Through Polaroid Images

CSS Infinite Slider Flipping Through Polaroid Images

How to create a responsive sidebar menu using CSS

How to create a responsive sidebar menu using CSS

CSS Infinite and Circular Rotating Image Slider

CSS Infinite and Circular Rotating Image Slider

Making Static Noise From a Weird CSS Gradient Bug

Making Static Noise From a Weird CSS Gradient Bug

CSS Grid and Custom Shapes, Part 3

CSS Grid and Custom Shapes, Part 3

Fancy Image Decorations: Outlines and Complex Animations

Fancy Image Decorations: Outlines and Complex Animations

Fancy Image Decorations: Masks and Advanced Hover Effects

Fancy Image Decorations: Masks and Advanced Hover Effects

Fancy Image Decorations: Single Element Magic

Fancy Image Decorations: Single Element Magic

How to create an infinite image slider using CSS

How to create an infinite image slider using CSS

How to Create Wavy Shapes & Patterns in CSS

How to Create Wavy Shapes & Patterns in CSS

How I Made a Pure CSS Puzzle Game

How I Made a Pure CSS Puzzle Game

How to create a Tooltip/Speech Bubble using CSS

How to create a Tooltip/Speech Bubble using CSS

CSS Grid and Custom Shapes, Part 2

CSS Grid and Custom Shapes, Part 2

CSS Grid and Custom Shapes, Part 1

CSS Grid and Custom Shapes, Part 1

Zooming Images in a Grid Layout

Zooming Images in a Grid Layout

How to create a CSS-only loader with one element

How to create a CSS-only loader with one element

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

How to create background pattern using CSS & conic-gradient

How to create background pattern using CSS & conic-gradient

Single Element Loaders: Going 3D!

Single Element Loaders: Going 3D!

Single Element Loaders: The Bars

Single Element Loaders: The Bars

Single Element Loaders: The Dots

Single Element Loaders: The Dots

How to style a progress bar using CSS

How to style a progress bar using CSS

Single Element Loaders: The Spinner

Single Element Loaders: The Spinner

Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D

Cool CSS Hover Effects That Use Background Clipping, Masks, and 3D

Cool Hover Effects That Use CSS Text Shadow

Cool Hover Effects That Use CSS Text Shadow

How to create a responsive hamburger menu using CSS

How to create a responsive hamburger menu using CSS

Cool hover effect using background properties

Cool Hover Effects That Use Background Properties

CSS radial-gradient

Learn CSS radial-gradient by Building Background Patterns

CSS Tricks to style checkbox and radio buttons

How to style checkbox and radio buttons using CSS

CSS effects on images

CSS effects on images

CSS Custom corners with mask and clip-path

Tricks to Cut Corners Using CSS Mask and Clip-Path Properties

CSS section divider

How to Create a Section Divider Using CSS

CSS-Only Ribbon

How to Create a CSS-Only Ribbon for Your Website

CSS Borders with masks

Fancy CSS Borders Using Masks (Zig-Zag, Wavy, and More)

CSS-Only Loaders

How to Create a CSS-Only Loader Using One Element

100 CSS Loaders

I am back with 100 "Dark Mode" CSS loaders

CSS-Only Pie Chart

How to Create a Pie Chart Using Only CSS

Back to top button with CSS

How to Make an Animated Back to Top Button Using Only CSS

Responside design without media query

Responsive Layouts, Fewer Media Queries

Round shapes

Exploring the CSS Paint API: Rounding Shapes

Polygon borders

Exploring the CSS Paint API: Polygon Border

CSS loader - The Dots

Build your CSS loader with only one div — The Dots

Multi-line Typewriter

A Multi-line CSS only Typewriter effect

Blob Animation

Exploring the CSS Paint API: Blob Animation

CSS-Only Typewriter

A scalable CSS only Typewriter Effect

CSS loaders

Adding 100 underline/overlay animations | The impressive CSS collection ⭐️

Fragmentation effect

Exploring the CSS Paint API: Image Fragmentation Effect

reaction component

A CSS-only reaction component using emoji

Complex CSS transition

Build Complex CSS Transitions using Custom Properties and cubic-bezier()

CSS Star rating

Scalable "star rating" without JS (and no SVG or image for the star)

500 loaders

Adding 100 CSS loaders to the collection of — 500 CSS loaders 🏆

CSS loaders

Still 100 CSS loaders for your next project

CSS Hexagons grid

Hexagons and Beyond: Flexible, Responsive Grid Patterns, Sans Media Queries

CSS loaders

I made 100 more CSS loaders for your next project

CSS loaders

Another 100 CSS loaders for your next project

Advanced CSS animations

Advanced CSS Animation Using cubic-bezier()

Advanced CSS animations

I made 100 CSS loaders for your next project

CSS Responsie design

Build your Responsive website without media query

CSS Responsie design

Still 100 underline/overlay animations | The advanced CSS collection 🚀

Float bottom corner

Float an Element to the Bottom Corner

CSS underline overlay animation

100 more underline/overlay animations | The upgraded CSS collection 🥇🥈🥉

CSS variables

What no one told you about CSS Variables

CSS underline overlay animation

Another 100 underline/overlay animations | The extended CSS collection 🥇🥈

Fragmentation effect

Image Fragmentation Effect With CSS Masks and Custom Properties

CSS underline overlay animation

100 underline/overlay animations | The ultimate CSS collection 🥇

background position

All you need to know about background-position

rotated text

How to correctly position rotated text using CSS

responsive image text

Responsive text based on image size

CSS masonry laout

Finally a CSS-only solution to create masonry layouts

flexbox text container

Never make your text container a flexbox container

gradient animation

We can finally animate CSS gradient

Folded responsive ribbon

Fully responsive CSS folded ribbon

CSS rounded shapes

CSS Shapes with rounded corners

Text inside circle

Wrapping text inside a circular shape

CSS hexagon grid

Responsive hexagon grid without media query

Border gradient with radius

Border with gradient and radius