Feed - CSS Tip: Learn CSS the easy way

A Squishy Button with a Hover/Click Effect 🔗

Use the shape() function to create a fancy frame around a button element with a cool animation on hover and on click. Read more [...]

A Squircle Shape using clip-path: shape() 🔗

Until better support for corner-shape, we can approximate a squircle shape using clip-path: shape(). A flexible implementation using CSS variable to e [...]

A Generator for Fancy Frames 🔗

Generate a fancy frame with one line of code using clip-path: shape(). Simply adjust the setting and obtain a variety of cool frames (Squiggle, Wavy, [...]

The Hidden Trick of Style Queries and if() 🔗

With modern CSS, we have two new ways to express conditions: inline if() and style queries. Their syntax is as follows: Read more [...]

Why is Anchor Positioning not working? 🔗

blockquote { margin-inline: auto; padding: 1em; border: 2px dashed; border-radius: 10px; font-size: 1.2em; width: fit-content; text-alig [...]

Graph Theory using Modern CSS 🔗

Let's suppose you have a graph with a known number of nodes and you want to identify the shortest path between two nodes. It's possible using only CSS [...]

A Better Way to Express Percentage Height 🔗

Percentage height is a common issue in CSS. Using height: 100% to fill the vertical space fails in most cases because the parent container doesn't hav [...]

How to use the "auto" value with clamp() 🔗

If you have tried the code below, you know it doesn't work: Read more [...]

Elastic/Bouncy Text Effect 🔗

Combining modern features such as shape(), sibling-index()/sibling-count(), linear(), etc., to create a funny elastic effect on hover. There is no tex [...]

Responsive Pyramidal Grid of Hexagon Shapes (and more!) 🔗

Following the previous post, here is another type of responsive grid: a pyramidal grid of hexagon shapes! Another fancy layout powered by modern CSS, [...]

Recreating the <filedset> component and its <legend> 🔗

Using a minimal HTML code and modern CSS to recreate the <fieldset> component. A responsive implementation easy to control using CSS variables. It's a [...]

A Generator for Random Wavy Dividers 🔗

Generate a fancy wavy divider with one line of code using clip-path: shape(). css-generators.com/wavy-divider It's a responsive single-element imple [...]

Connecting Circles With Anchor Positioning II 🔗

Improving the previous implementation to include the calculation of the distance between both circles inside the arrow shape. Still the same code st [...]

Responsive Hexagon Grid without Media Queries 🔗

Using modern CSS to improve an old implementation of a responsive hexagon grid. coner-shape to create the hexagon shape and sibling-index() combined w [...]

Connecting Circles With Anchor Positioning 🔗

Let's suppose you have two circles randomly placed on the page, and you want to create a connection between them. Sounds like a JavaScript job, but CS [...]

Fizz Buzz using Modern CSS (no HTML) 🔗

Is it possible to create a Fizz Buzz using HTML and CSS? Yes, but what about a pure CSS version, with no HTML at all? It's doable using modern feature [...]

The Hidden Selectors of The HTML Element 🔗

How would you select the <html> element? Using the classic and well-known html {} and :root {}, right? What if I tell you there are other hidden selec [...]

Gallery of Skewed Images with Hover Effect 🔗

Another classic component made easy with modern CSS and the new corner-shape. A gallery of skewed images with a reveal effect on hover using a few lin [...]

Direction-Aware CSS Shapes 🔗

Building on the previous idea, here is a more generic piece of code to make any CSS shape direction-aware. It relies on a few lines of well-supported [...]

Direction-Aware Arrow Shape using corner-shape 🔗

We can use the new corner-shape to draw different CSS Shapes. And since it relies on border-radius, we can use the logical properties to create a dire [...]

Dynamic Tooltip Position with Anchor Positioning IV 🔗

Another demo using Anchor Positioning and Tooltips. This time, the tail will have a stretchy behavior when the tooltip gets closer to the edges. R [...]

Responsive Circular List of Stacked/Overlapping Images 🔗

Building on the idea from the previous post, I created a circular list instead of a horizontal one. The position of the images will adjust according t [...]

Responsive List of Stacked/Overlapping Images 🔗

Using modern CSS and a few lines of code to create a responsive list of stacked images. The overlap between the images will adjust automatically based [...]

The Universal Focus Ring 🔗

Replace the default focus ring with a stylish one that travels between the elements as you navigate with your keyboard. A funny experiment* using Anch [...]

Dynamic Tooltip Position with Anchor Positioning III 🔗

Here is another idea of implementation (after the first and second ones), where the tooltip adjusts its position to remain visible and follow its anch [...]

Alignment in Anchor Positioning using position-area 🔗

The position-area property allows you to control the placement of an absolutely positioned element relative to its anchor box. It considers a 3x3 grid [...]

Dynamic Tooltip Position with Anchor Positioning II 🔗

In the previous post, we created a tooltip that flips between two positions to remain visible. It's either on the top or the bottom. We can adjust the [...]

Conditional Border Radius with Modern CSS 🔗

Toggle the value of border-radius based on the container/screen size using a simple line of code. Read more [...]

Dynamic Tooltip Position with Anchor Positioning 🔗

With anchor positioning, we can anchor an element to another and also ensure it remains visible on the screen regardless of the anchor's position. Now [...]

Range Selection using Modern CSS 🔗

Similar to the dynamic :nth-child(), we can use if() and math functions to emulate a range selection. Instead of: Read more [...]

3D Box using Modern CSS 🔗

In a previous post, I created a simple 3D box using corner-shape and the border properties. Read more [...]

CSS Shapes using corner-shape 🔗

Ready for the new corner-shape property? It allows you to manipulate the shape of the corners, and by simply adjusting the border-radius, you can crea [...]

Why :is(::before,::after) doesn't work? 🔗

The functional pseudo-class :is() is ideal for shortening selectors. Take the following example: Read more [...]

100 Ways to Center an element Horizontally and Vertically 🔗

Centering in CSS is pretty easy nowadays. We have numerous methods to do it, but how many exactly? I did the count, and I was able to reach 100 differ [...]

The Fundamentals of CSS Alignment 🔗

The Fundamentals of CSS Alignment September 04, 2025 (Last updated on September 12, 2025) While centering elements in CSS has become easy over time, t [...]

Circular Gallery of Rounded Images 🔗

In a previous post, we saw how to place images around a circle. We can use the same trick to create a circular gallery of images. Thanks to a combinat [...]

Dynamic media/container queries using if() 🔗

Similar to the :nth-child() trick, we can use the if() condition and some calculation to implement the logic of media queries. Instead of: Read more [...]

Sequential Animations with N elements 🔗

Using modern CSS, you can create a sequential animation that involves an unknown number of items with a simple code. No need for complex keyframes, de [...]

Responsive Infinite Logo Marquee 🔗

With the powerful shape() function and the new sibling-index()/sibling-count() functions, we can create an infinite logo marquee using a few lines of [...]

How to place images around a circle 🔗

Using offset combined with the new sibling-index() and sibling-count() functions, we can easily and precisely place images (or any elements) around a [...]

Dynamic nth-child() using sibling-index() and if() 🔗

We can get the index of an element using sibling-index(), and we can express inline conditions using if(). With both features, we can implement :nth-c [...]

Get the index of an element within its parent 🔗

With CSS, you can use the new sibling-index() function to get the position of any element relative to all its sibling elements. You can also rely on s [...]

Invert CSS Shapes using shape() 🔗

Do you want to invert a shape created using clip-path: shape()? With a simple code, you can have both the main shape and its cut-out version. Read [...]

Dots loader using shape() 🔗

Recreating a 3 dots loader using shape() and animating it using CSS variables and @property Read more [...]

The Future of Hexagon Shapes 🔗

A new and easy way to create hexagon shapes using corner-shape. As a bonus, you can add a border to it. It's the only method that works with borders! [...]

Safe align your content 🔗

Do you know the safe keyword? In some specific cases, your content may overflow the container and you won't be able to scroll to it. It happens with s [...]

How to correctly use if() in CSS 🔗

CSS is adding a new way to express conditions using an if() syntax. While it looks easy to use, there is a gotcha you should be aware of. Take the exa [...]

How to style a broken image 🔗

When an image fails to load the browser will simply show you the alt text but you can change this using a cool CSS trick. Broken images accept pseudo- [...]

Arc shape with rounded edges 🔗

Previously, I used CSS mask to create an arc shape with rounded edges. Now, we can rely on the new shape() function that produces a more compact code [...]

SVG to CSS Shape Converter 🔗

Do you want to convert an SVG code into CSS? Check my online generator: css-generators.com/svg-to-css It will transform a shape created using <path d= [...]

Blob shape with hover effect 🔗

Use the new shape() and create a cool CSS-only blob shape. Get the code from my online generator. You can have a cool hover effect by applying a tra [...]

A heart shape with modern CSS 🔗

Another classic shape made easy with the new shape() function. A heart shape with a simple code. Read more [...]

Arrow-like Box with rounded corners 🔗

Another experimentation using the new shape() function to add rounded corners to a box with a triangular shape. A complex-looking code but all you h [...]

Polygon shapes with rounded corners 🔗

Similar to the hexagon shape, here is a generic code to create any regular polygon shape with rounded corners. Powered by Sass and the new shape() fun [...]

Hexagon shapes with rounded corners 🔗

We can create a hexagon shape using clip-path: polygon() but what about the rounded corners variation? It's now possible with the new clip-path: shape [...]

The unknown behavior of flex-wrap 🔗

flex-wrap: wrap allows items to wrap onto multiple lines but it has another function. It transforms your flex container from a single-line to a multi- [...]

Custom progress element using attr() 🔗

Using the new attr() function, we can customize a progress element based on the progression. We can, for example, have a different coloration for each [...]

Zig-Zag edges using CSS mask 🔗

Add Zig-Zag edges to your element using the mask property and one gradient. Read more [...]

Split and assemble an image using CSS mask 🔗

Split an image into pieces using the mask property, then show it fully on hover. A single-element implementation using less than 10 CSS declarations. [...]

An infinite logos animation 🔗

Another classic logos animation?! No! This one is THE real infinite ∞ logos animation. Minimal HTML Powered by the offset property Responsive Read [...]

Transparent inner border for images 🔗

Cut a border from the inside of an image using the mask property and two gradients. Read more [...]

Get the value of an input range (without JavaScript) 🔗

A few lines of code and you have a CSS-only way to read the value of an input range slider. Powered by Scroll-driven animations, attr(), and @property [...]

Trim extra space using text-box 🔗

select { font-size: 1em; margin-block: .1em; } section { border: 1px solid; margin: 10px auto; font-size: 1.5em; line-heig [...]

Perfectly center an uppercase text 🔗

Are you tired of the unwanted spaces above and below your text? One line of code can fix this and you can have a perfect centering for your uppercase [...]

The difference between zoom and scale 🔗

Do you know the zoom property? It works the same way as a scale transformation but unlike scale, it affects the page layout. In other words, the page [...]

Bouncy radio buttons using modern CSS 🔗

A fun CSS-only experimentation using modern features to create bouncy radio buttons. Powered by anchor positioning, @property, :has() selector, and mo [...]

A single-element volume control component 🔗

Similar to the star rating component, I am creating a volume control component using the native range slider and zero JavaScript. No extra element is [...]

Inverted radius shape with hover effect 🔗

Combining the inverted radius shape with modern CSS to create a fancy reveal animation. Hover the image to reveal the text. Minimal HTML (the <figure> [...]

A single-element star rating component (without JS) 🔗

Transform the native range slider into a star rating component using a few lines of CSS and zero JavaScript. You can adjust the number of stars by sim [...]

A wiggly box (wavy borders) using CSS Mask 🔗

Using the same code structure as the wavy box to create another variation, a wiggly box! Only one element (the <img> tag) No pseudo-elements Optimized [...]

Smoothly stop an infinite rotation 🔗

After the previous effect, here is a different way to stop an infinite rotation on hover. This time, the element will smoothly return to its initial p [...]

Running animations without keyframes 🔗

Using the new @starting-style you can create animations without using @keyframes. It's not a replacement for the classic way to create animations but [...]

A CSS-only clock showing the current time 🔗

What time is it? We can answer this question using only CSS! The demo below is a clock that shows you the current time (You can compare with your smar [...]

Smooth rotation with modern CSS 🔗

Use modern CSS to control the rotation of any element smoothly. Hover to rotate, click to accelerate, unhover to return to the initial position follow [...]

Overflow/scrollbar detection using modern CSS 🔗

Do you want to detect if an element is having an overflow or if it's scrollable? It's possible with scroll-driven animation! You can also store this i [...]

A new way to center block elements using place-self 🔗

A modern and more intuitive way to center block elements is available! One line of code and you can replace the use of margin: auto combined with widt [...]

Border-only breadcrumb shape using modern CSS 🔗

Create a border-only breadcrumb shape using a few lines of code and modern CSS. No extra element Powered by clip-path & math functions Optimized with [...]

Glowing border animation with a smooth stop 🔗

Add a glowing border animation around your image (or any element) with a few lines of code. The cool part? It's an infinite animation on hover that st [...]

Full-bleed layout with modern CSS 🔗

Use modern CSS and a few lines of code to create a full-bleed layout. Full-bleed? It's when an element needs to bleed outside the main container and e [...]

How to correctly use steps() with animations 🔗

You want to create a discrete animation using steps() but you struggle with its value, right? You never know how many steps it requires and it never w [...]

Vertical rounded tabs using CSS mask 🔗

Updating the previous rounded tab shape to create the vertical version using the same code structure. No extra element & No pseudo-element One variabl [...]

Get the scrollbar width using only CSS 🔗

Do you want to know the scrollbar width? It's possible using only CSS and a few lines of code! You can get the pixel value within a CSS variable and u [...]

Folded rectangle shapes using CSS mask 🔗

Create folded rectangle shapes with a subtle 3D effect Single element (no pseudo-element) Optimized with CSS Variables Powered by CSS mask Read mo [...]

Indent each line of your text 🔗

Do you know that text-indent can take an extra value each-line? It allows you to have an indentation after each line! Useful if you rely on <br> to ad [...]

Select the last occurrence of an element in the whole document 🔗

We saw the selector for the first occurrence and here is the selector for the last occurrence. Read more [...]

Select the first occurrence of an element in the whole document 🔗

A CSS selector to select the first occurrence of an element regardless of its position in the document. The equivalent of document.querySelector('.tar [...]

3D parallax effect on hover 🔗

After the previous effect, I am trying another concept of 3D parallax effect with a better illusion! No extra element (only the <img> tag) No pseudo-e [...]

How to correctly define a one-color gradient 🔗

Learn the correct way to create a one-color gradient with an optimized code. Stop using default values and save some space! All the below are the same [...]

Avatar hover effect with a rhombus shape 🔗

Place you image inside a rhombus shape with a cool hover effect No extra element (only the <img> tag) No pseudo-element Less than 15 CSS declarations [...]

Inner display vs Outer display 🔗

Do you know that the below declarations are the same? Read more [...]

Puzzle shapes using CSS mask 🔗

Create different kind of puzzle shapes using a few lines of code Single element (Works with <img>) Optimized with CSS variables Powered by CSS mask [...]

The Filling CSS loaders Collection 🔗

Adding a new set of loaders to the biggest collection of loading animations. The Filling CSS Loaders Collection # One example: Read more [...]

Default behavior of position absolute 🔗

Many have a wrong information about the default behavior of position: absolute element. "if an absolute positioned element has no positioned ancestors [...]

Animate to height/width auto (without hacks) 🔗

Only three lines of code and you have a smooth transition to height: auto Read more [...]

Remove the unit from any CSS value 🔗

Do you want to convert a length value to a unitless value? It's possible with a simple CSS trick. Read more [...]

Update CSS variables using range slider 🔗

Using scroll-driven animations, you can link a CSS variable with a range slider and easily update its value! No more JavaScript to do this. A few line [...]

Progress element with a tooltip 🔗

Adding a tooltip to the native progress element showing the percentage of progress. No extra elements (only the <progress> tag) No inline CSS Everythi [...]

Curved avatar header with hover effect 🔗

I am using the inner curve/notch shape to create a fancy header with an avatar and a cool hover effect. No complex HTML code Powered by CSS mask, @pro [...]

Inner curve/notch shape using CSS mask 🔗

Create an inner curve/notch shape using CSS mask and a few lines of code Only one element No pseudo-element Works with gradients & images Optimized wi [...]

Quantity queries using has() selector 🔗

input,select {font-size: 1em} input[type=number] {font-family: monospace;width: 6ch} input[type=text] {width:150px} Adjust the below to get your [...]

A decorative line with rounded dashes 🔗

Create a nice decorative line with rounded dashes using a few lines of code Only one element Responsive (no cut or partial dash) You can easily switch [...]

A CSS generator for wavy circle shapes 🔗

Use an online generator to create fancy wavy circles in no time! css-generators.com/wavy-circle Only one element (no pseudo-elements) Works with <img> [...]

Arc shape with rounded edges 🔗

Create an arc shape with rounded edges using a few lines of CSS Single element (no pseudo-element) Less than 10 CSS declarations Supports gradient col [...]

Get the width of the scrollbar using only CSS 🔗

You can find a better implementation here: Get the scrollbar width using only CSS "What is the width of the scrollbar?" A question we can answer usin [...]

Count the number of lines inside a text 🔗

By adjusting the code of the previous tip (getting the width/height of any element) we can do some intresting counting. For example, we can count the [...]

Get the width & height of any element without JavaScript 🔗

Use modern CSS features to get the width and height of any element as CSS variables. Powered by Scroll-Driven animations and @property Unitless values [...]

Calculate the scroll progress of an arbitrary element 🔗

The same code of the previous trick can also be used to get the scroll progress of any element on the page. The only difference is the use of self ins [...]

Calculate the scroll progress of the page 🔗

Get the scroll progress of the page as a CSS variable using a few lines of code Powered by Scroll-Driven animations Defined at the :root level (avaiab [...]

Manual typography using Scroll-driven animations 🔗

Add a slider to adjust the font-size of your website using modern CSS features. 0 JavaScript required (100% CSS) Powered by Scroll-driven animations & [...]

Typed CSS variables using @property 🔗

Stop defining your variables inside :root! Use the @property instead and create "Typed CSS Variables" Easy to debug using Dev tools Implicit data vali [...]

Get the screen width & height without JavaScript 🔗

Get the screen width and height as pixel values using a simple CSS code. Unitless values so you can easily use them inside any formula Updates on scre [...]

Border gradient with border-radius 🔗

Save this code for the future! It will be the easiest way to add a gradient coloration to borders while having rounded corners. No pseudo-element One [...]

Inverted border-radius using CSS mask 🔗

Use CSS mask to create an inverted radius corner with a minimal code. No extra elements No pseudo-elements Optimized with CSS variables Read more [...]

Circular progress using scroll-driven animations 🔗

Transforming the native progress element into a circular one. No extra elements (only the <progress> tag) No Magic Numbers Everything is controlled by [...]

Grainy texture using CSS gradients 🔗

Create a random-style background (grainy texture) using a few lines of code. Read more [...]

Fancy hover effect with anchor positioning 🔗

A few experiemntation usign Anchor Positioning to create fancy hover effects. Highlight the menu items with a sliding effect. Read more [...]

Cut-out shapes using clip-path 🔗

A simple code to invert any kind of shape created using clip-path: polygon(). An easy way to create Cut-out shapes. Read more [...]

Custom range slider with tooltip II 🔗

After the previous concept, here is another idea of range slider. The tooltip will adjust its shape to stay within the boundaries of the slider. Even [...]

Better text wrapping using text-wrap 🔗

Enhance your text wrapping using text-wrap. No more lonely words at the end of paragraphs, and titles will look much better. Read more [...]

Custom range slider with tooltip 🔗

Create a custom range slider with a tooltip showing the selected value. There is no JS to update the values, it's pure CSS with minimal HTML! Powered [...]

No more pixel rounding issues! 🔗

One line of code that looks strange and confusing. You may think it's not even CSS but it will save you many times in the future: Read more [...]

CSS-only background patterns with a minimal code 🔗

css-pattern.com: The Biggest Collection Of Background Patterns A unique URL per pattern Controls to adjust the size & colors Easy navigation between t [...]

Single-digit inputs with one element (OTP) 🔗

Turn a simple input into single-digit inputs using a few lines of CSS. Useful for One-Time Password fields. No extra element (only the <input> element [...]

A Sparkle shape with one gradient 🔗

How much code is needed to create a Sparkle shape? ✨ Only one gradient and you can easily get the border-only variation. Read more [...]

How to extract R,G,B Channels from a color 🔗

Using the new relative color syntax, you can easily extract the R,G,B channels of any color and use them as separate colors. Useful when you want to d [...]

The shortest selector for the root element 🔗

To target the html element, you either use "html{}" or ":root{}" but thanks to CSS nesting you can simply use "&{}" When used alone, the nesting selec [...]

Avatar with status indicator 🔗

Use modern CSS to add a status indicator to your avatar using less than 10 CSS declarations and without extra elements. Only the <img> tag No pseudo-e [...]

Create CSS Shapes with a single element 🔗

css-shape.com: The Ultimate Collection of CSS-Only shapes Single-element implementation Optimized CSS code Easy to customize One click to copy the cod [...]

Write better CSS with modern CSS 🔗

A lot of new CSS features can help you optimize your code and reduce redundancy. CSS Nesting CSS Variables Media Query range features Here is an examp [...]

A fancy frame with Zig-Zag borders 🔗

Use modern CSS to create a fancy Zig-Zag border around images using a few lines of code. Only one element (the <img> tag) No pseudo-element Optimized [...]

A Modern way to create a star shape 🔗

Create a Star shape using clip-path and only 5 points instead of 10. Three different codes to create the same shape Precise version using math Calcula [...]

CSS-Only pixelated cut corners 🔗

Use modern CSS to cut the corner of an image with a pixelated effect. Only one element (the <img> tag) Only 4 properties Optimized with CSS variables [...]

Rounded tabs with inner curves 🔗

Use modern CSS to create those famous rounded tabs with inner curves. No extra element & No pseudo-element Less than 10 CSS declarations to get the th [...]

Fluid typography with discrete steps 🔗

Use the round() function and create a fluid typography with a discrete function instead of a continuous one. Define the step and get precise values wi [...]

A CSS-only wavy divider 🔗

Use modern CSS and add a cool Wavy divider to your section. Only one property and two gradients are needed. Read more [...]

A CSS-only fragmentation effect 🔗

Add a hover aniamtion with a fancy fragmentation effect using only the <img> tag. Powered by CSS Mask, @property and optimized with CSS mask Read [...]

Smoothly stop a rotation on hover 🔗

Make your rotation look more natural by smoothly stopping it on hover instead of an abrupt stop. No complex code is required! The rotation will resume [...]

Accelerate a rotation on hover 🔗

Do you want to accelerate the rotation of your element on hover? Here is a simple CSS trick using animation-composition and a few lines of code No ext [...]

Turn an image into a postage stamp 🔗

Transform your image into a cool postage stamp with a few lines of code No extra element (only the <img> tag) Only two CSS gradients Works with any im [...]

A wavy circle with cool hover effect 🔗

Place you image inside a wavy circular frame powered by modern CSS (mask, trigonometric functions, @property, animation-composition and more) No extra [...]

The gotcha of align-content with block elements 🔗

Everyone is excited about the new align-content that works with block-level elements, but pay attention when you want to center elements such as <img> [...]

CSS Functions that work without arguments 🔗

Do you know that some CSS functions can be used without arguments? This is the case with circle() and ellipse() of clip-path. No need to provide any a [...]

Create a flower shape using CSS mask 🔗

Create a fancy flower shape using an online generator 🌺 css-generators.com/flower-shapes Get an optimized code in no time. Adjust the setting and the [...]

Be careful when using the nesting selector (&) 🔗

CSS Nesting is cool and using the "&" is a lifesaver BUT be careful. There's a gotcha! ⚠️ "&" in CSS is different from the one in Sass ⚠️ Your Sass co [...]

Heart shape with a sliding hover effect II 🔗

Another variation of the previous effect using the same code structure No extra element (only the <img> tag) No pseudo-elements Read more [...]

Heart shape with a sliding hover effect 🔗

Turn your image into a heart shape with a lovely hover animation 😍 No extra element (only the <img> tag) No pseudo-elements Less than 15 CSS declarat [...]

Create a triangle shape with 2 CSS properties 🔗

Creating a basic triangle shape is as simple as using two CSS properties aspect-ratio clip-path (with a 3-point polygon) That's it, and it works with [...]

Responsive full-screen slanted coloration 🔗

Use modern CSS to: Set a max-width Center an element Set a minimum margin Add a full-width slanted coloration Make the slant effect responsive All of [...]

When to use the min() or max() function 🔗

min() or max()? You always struggle to know which one to use and you end up trying both until one of them works. 💡 Here is a figure to help you decid [...]

An infinite number of borders around images 🔗

Use the magic border-image and add as many borders as you want to your images for a fancy decoration No extra elements & No pseudo-elements Only one g [...]

A curved ribbon shape with hover effect 🔗

Create a simple ribbon shape with a cool hover effect Only one element Optimized with CSS variables Powered by @property Read more [...]

A fancy frame with wavy borders (wavy box) 🔗

Place your image inside a wavy box using a few lines of code Only one element (the <img> tag) No pseudo-elements Optimized with CSS Variables Works wi [...]

Triangle shape with rounded corners 🔗

A modern way to create a triangle with rounded corners Only one element (no pseudo-elements) Only three CSS properties One variable to control the rad [...]

A Modern way to create an octagon shape 🔗

An easy and modern way to create Octagon shapes Only 2 CSS declarations No magic numbers A 4-point polygon (instead of 8) for the clip-path Read m [...]

A Modern way to create hexagon shapes 🔗

An easy and modern way to create Hexagon Shapes Only 2 CSS declarations No magic numbers A simple 4-point polygon for the clip-path Read more [...]

Fix your images with an adhesive tape 🔗

Don't let your images fall. Stick them with some adhesive tape! A CSS-only solution using a single element. Durable fixation & easy to remove Pre-cut [...]

Fancy corner decoration for your images 🔗

Add a fancy decoration to the corners of your image using a few lines of code No extra element (only the <img> tag) No pseudo-element Optimized with C [...]

Border with inner radius for your images 🔗

Add a border with an inner radius to your image using a simple code. No extra element No pseudo-element Only 2 CSS declarations Read more [...]

Circular list of stacked avatars 🔗

An horizontal list is good but a circular one is better 🤩 Another list of stacked avatars using the same code structure Minimal HTML (images inside a [...]

Horizontal list of stacked avatars 🔗

Create a list of stacked avatars with a cool hover effect and with transparency Minimal HTML (images inside a container) Works with any number of imag [...]

Add a 3D style to your text III 🔗

Add a cool 3D effect to your name or your favorite number Only one element per word (not per letter) No pseudo-elements Optimized with CSS variables [...]

Place your image inside a 3D gift box II 🔗

Here is another variation of the previous effect. Now you can open the gift box from both sides 🎁 Still using only the <img> tag (No extra elements, [...]

Place your image inside a 3D gift box 🔗

Place your image inside a 3D box and reveal it with a cool hover effect. Perfect for your virtual gifts 🎁 No extra element (only the <img> tag) No ps [...]

A circular reveal effect for your images 🔗

Add a fancy reveal effect to your images with a few lines of code No extra element (only the <img> tag) No pseudo-elements Powered by CSS Variables & [...]

Infinite stripes shadow for your images 🔗

Another variation of the previous effect with infinite stripes No extra element (only the image tag) No pseudo-elements Optimized with CSS variables [...]

Infinite shadow for your images II 🔗

Another variation of the previous effect where you can add a diagonal infinite shadow to your rounded image. No extra element (only the <img> tag) No [...]

Overlay reveal animation for your images 🔗

Add a reveal animation to your image with a simple code No extra element (only the image tag) No pseudo-elements Optimized with CSS Variables Read [...]

A Ribbon shape with a reveal hover effect 🔗

Create a ribbon shape with a fancy reveal effect on hover Only one element No fixed size (it fits your text content) Optimized with CSS Variables [...]

Rounded gradient border with hover effect 🔗

Add a fancy hover effect to your image with a gradient border No extra element (only the <img> tag) No pseudo-element Powered by CSS mask & @property [...]

A Tooltip Shape using 2 CSS properties 🔗

The smallest code to create a simple Tooltip Shape One element (No pseudo-elements) Only 2 CSS Properties Optimized with CSS Variables Read more [...]

Add a 3D style to your text II 🔗

Another concept of 3D text with a minimal code Only one element (no pseudo-elements) Works with multi-line text Optimized with CSS variables Read [...]

Add a 3D style to your text 🔗

Add a touch of 3D to your text using a few lines of code Minimal HTML Works with multi-line text Less than 10 CSS declarations Read more [...]

Responsive multi-line Ribbon Shape II 🔗

After the previous one, here is another concept of Responsive Ribbon Shape using the same code structure. Only one element Works with multi-line text [...]

An Infinite Ribbon Shape for your title 🔗

Transform your title into an Infinite Ribbon Shape using a few lines of code Only one element No pseudo-elements No overflow issue Read more [...]

Responsive multi-line Ribbon Shape 🔗

Place your text inside a responsive ribbon shape using a few lines of code. Only one element No pseudo-elements Works with multi-line text Read mo [...]

Folded Ribbon Shape with hover effect II 🔗

Create a fancy ribbon shape with a few lines of code Only one element No pseudo-elements Optimized with CSS variables Nice animation on hover Read [...]

Rotated Ribbon Shape with hover effect 🔗

Place your title into a fancy Ribbon Shape with a cool hover effect 😍 Only one element Optimized with CSS variables Powered by modern CSS features 💪 [...]

Folded Ribbon Shape with hover effect 🔗

Turn your title into a fancy Ribbon Shape 🎀 One element (no complex HTML) No pseudo-elements Optimized with CSS variables Cool animation on hover [...]

A Fancy Hover Effect For Your Avatar III 🔗

Another fancy "Pop out" hover effect using modern CSS. The spiky variation of the previous effect No extra element (only the <img> tag) No pseudo-elem [...]

Slanted underline with hover effect 🔗

Add a slanted underline to your text with a nice hover effect using a simple code Minimal HTML No pseudo-elements Works with multi-line text Optimized [...]

Starburst images with rotation 🔗

Place your image inside a Starburst shape with a cool rotation 🤩 No extra element (only the <img> tag) Powered by clip-path Get the code in no time u [...]

Infinite shadow for your images 🔗

Add an infinite shadow to your image in any direction using a few lines of code No extra element (only the <img> tag) No pseudo-elements Only 2 CSS pr [...]

Fancy circular hover effect 🔗

Create a fancy hover effect with small circles rotating around your image. No extra element (only the <img> tag) No pseudo-elements Powered by CSS Mas [...]

Border reveal animation on hover 🔗

Add a simple border around your image with a nice hover effect No extra element (only the <img> tag) No pseudo-elements Only 3 Gradients Less than 15 [...]

Fancy frame for your image with hover effect 🔗

Add a nice frame around your image with a cool hover effect No extra element (only the <img> tag) No pseudo-elements Only 4 gradients Optimized with C [...]

Zig-Zag sepration between images with hover effect 🔗

Place 2 images next to each other with a Zig-Zag separation ⚡️ Minimal HTML code Less than 25 CSS declarations Optimized with CSS variables Nice hover [...]

A Fancy Hover Effect For Your Avatar II 🔗

Add a fancy "Pop out" hover effect to your avatar using modern CSS. Another variation of the previous effect No extra element (only the <img> tag) No [...]

A Fancy Hover Effect For Your Avatar 🔗

Add a nice "Pop out" hover effect to your avatar using a minimalist code No extra element (only the <img> tag) No pseudo-element Less than 20 declarat [...]

A reveal hover effect using CSS mask III 🔗

Add a nice reveal animation to your image with a few lines of code No extra element (only the <img> tag) No pseudo-elements Powered by CSS Mask & @pro [...]

A simple checkbox using CSS mask 🔗

A simple design for your checkbox with a nice animation on click. No extra element (only the <input> tag) No pseudo-elements One value to control the [...]

A reveal animation with a rotating square 🔗

Add a fancy reveal animation to your image on hover No extra element (only the <img> tag) Powered by Trigonometric functions and @property Optimized w [...]

A reveal hover effect using CSS mask II 🔗

Another variation of the previous hover effect with a diagonal reveal. Using the same code structure. No extra element (only the <img> tag) Less than [...]

A reveal hover effect using CSS mask 🔗

Reveal your images with a nice hover effect and a few lines of code No extra element (only the <img> tag) Less than 10 CSS declarations Powered by CSS [...]

A color wheel with an array of colors 🔗

Create a perfect color wheel with multiple colors using conic-gradient() One variable to define all the colors No color duplication Smooth transition [...]

Zoom effect on hover 🔗

Add a simple zoom effect on hover for your images with a small code No extra element (only the <img> tag) 5 CSS declarations Read more [...]

Corner-only borders with hover effect 🔗

Add corner-only borders to your images with a nice hover effect No extra element (only the <img> tag) No pseudo-element Less than 10 CSS declarations [...]

Overlapping border on images with hover effect 🔗

Add an overlapping border to your image with a nice hover effect No extra element (only the <img> tag) No pseudo-element 10 CSS declarations Optimized [...]

3D trailing shadows for images 🔗

Add a 3D trailing shadow to your image with a few lines of code No extra element (only the <img> tag) No pseudo-element Less than 10 CSS declarations [...]

A reveal hover effect with an expanding circle 🔗

Add a reveal animation to your image with a simple and nice hover effect No extra element (only the <img> tag) No pseudo-element 10 CSS declarations [...]

A CSS-only array of colors 🔗

Do you want to define an array of colors using only CSS? Yes, it's possible! It's limited to only background coloration but can be useful in many situ [...]

3D shine animation with a hover effect 🔗

Add a fancy 3D animation to your image with a cool hover effect No extra element (only the <img> tag) No pseudo-element Optimized with CSS variables [...]

Slow down a rotation on hover 🔗

Did you ever wanted to slow down a rotating element on mouse hover? You can easily do it with a simple code: No extra element No pseudo-element One an [...]

Sliding reveal animation for your images 🔗

Add a reveal effect to your image with a sliding animation on hover No extra element (only the <img> tag) No pseudo element Less than 10 CSS declarati [...]

Color your image with a sliding hover effect 🔗

Reveal the colors of your images with a sliding animation on hover No extra element (only the <img> tag) No pseudo-element Less than 15 CSS declaratio [...]

3D shine effect on hover 🔗

Add a 3D effect to your image with a shiny animation on hover ✨ No extra element (only the <img> tag) No pseudo-element Less than 10 CSS declrations [...]

A Rhombus shape with rounded corners 🔗

Transform your image into a Rhombus shape with rounded corners using a few lines of code No extra element (only the <img> tag) No pseudo-element Optim [...]

Add a gradient overlay using border-image 🔗

Do you want to add a gradient overlay above your background but you cannot edit the background property, add an extra element or use pseudo-element? Y [...]

Transform a 2D image into a 3D one 🔗

Transform your 2D image into a 3D one using a few lines of code No extra element (only the <img> tag) No pseudo-element Nice animation on hover 🤩 [...]

3D parallax effect on images 🔗

Add a fancy 3D effect to your image with a simple code No extra element (only the <img> tag) No pseudo-element No JavaScript Perfect 3D illusion on ho [...]

A folded ribbon to the corner 🔗

Add a folded ribbon to the corner of your container using a few lines of code One element (no pseudo-element) No fixed width/height (fit content size) [...]

A Ribbon title to the edge of the screen 🔗

Add a ribbon style to your title that extend to the edge of the screen. Only one CSS property 🤩 No extra element No pseudo-element No scrollbar issue [...]

Full screen slanted background 🔗

Add a slanted background to your container that extend to the edge of the screen. Only 2 CSS properties 🤯 No pseudo-element No scrollbar issue One va [...]

An inner border-radius with one property 🔗

Do you want to have a radius inside the element but not outside? You can do it using only one property 🤩 Read more [...]

Select all elemens between two class names 🔗

Do you want to select all the elements between two different class names? Use the :not() selector to do it Read more [...]

A reveal hover effect with a single element II 🔗

Adding more variations to the previous reveal animation using the same tricks No extra element (only the <img> tag) No pseudo-element Powered by objec [...]

A reveal hover effect with a single element 🔗

Add a simple reveal animation to your images using a few lines of code No extra element (only the <img> tag) No pseudo-element Less than 10 CSS declar [...]

A fancy hover effect with rotating squares 🔗

Add a fancy hover effect to your image with a small code. Transform your image into little rotating squares! One element (the <img> tag) No pseudo-ele [...]

A CSS-only Ribbon 🔗

Create a cool CSS Ribbon with a few lines of code One element (no pseudo-element) One color definition No fixed width/height (It fits the content size [...]

A CSS-only 3D Zig-Zag edge 🔗

Create a nice 3D Zig-Zag edge with a simple code: One element (No pseudo-element) Two gradients One color definition Optimized with CSS variables [...]

Select the first & last element with a class 🔗

Do you want to select the first and last element with a specific class? It's possible and you can do it using 2 different methods! Read more [...]

Customize your numbered list 🔗

Use @counter-style to customize your <ol> list with a simple code No extra markup No pseudo-element No need for counter() Keep the default browser alg [...]

CSS-only custom range slider 🔗

Use modern CSS tricks to create fancy range sliders with a little code No extra element (only the <input> element) Optimized with CSS variables Transp [...]

A color wheel with gradient 🔗

Use conic-gradient() and the new color interpolation to create a nice color wheel 🤩 Read more [...]

Fade content inside border using mask 🔗

Create a fading content while keeping the border visible using CSS mask. It works with border-radius and no need to know the value of border. Read [...]

Hue manipulation using color-mix() 🔗

Use the new color-mix() to manipulate the Hue of a color in the HSL color space Read more [...]

Color shades using color-mix() 🔗

Use the new color-mix() to create different shades from one color. Mix with ⚫️ black for a darker color and ⚪️ white for a lighter color Read more [...]

Color switch using color-mix() 🔗

Use the new color-mix() function to create a color switch with a compact code No color duplication Define your colors using one variable Easy switch b [...]

CSS shapes: Polygon & Starburst 🔗

Use online generators to create CSS shapes using clip-path in no time! Polygon Shapes: css-generators.com/polygon-shape Starburst Shapes: css-generat [...]

CSS-only gradient shadows 🔗

An online tool to create fancy CSS shadows with gradients coloration. Get the code in One click 🌟 Works with transparency Works with border-radius cs [...]

A border-only Tooltip using mask & clip-path 🔗

Create a border-only Tooltip with a few lines of code One element Support gradient coloration Support border-radius Optimized with CSS variables R [...]

A rainbow gradient animation 🔗

Use the new color interpolation to easily create an infinite rainbow animation using CSS gradients 🌈 One color declaration A simple animation Read mo [...]

Card reveal animation 🔗

Add a cool text reveal animation to your image card Minimal HTML No pseudo-element Powered by CSS Mask (with fallback for old browsers) Read more [...]

Fancy Rounded frame around your images 🔗

Add a nice frame around your image using a few lines of code One element (The <img> tag) No pseudo-element Only 3 CSS properties Optimized with CSS va [...]

How many elements your container has? 🔗

Use the :has() selector and style your container based on its number of elements (direct children) ⚠️ It doesn't count text nodes. Only tags! Read mor [...]

A CSS-only wavy shapes 🔗

How much code is needed to create a Wavy Shape? 1 Property 2 Gradients Use an online generator to easily get the code: css-generators.com/wavy-shapes [...]

An infinite image slider 🔗

Create an infinite image carousel using a few lines of code: Minimal HTML (<img>s inside a container) No duplicated images One simple animation Works [...]

Cut the corners of your element 🔗

How much code is needed to cut the four corners of an element? Also known as inverted border-radius One Property One Gradient Use an online generator [...]

A CSS-only Zig-Zag edge 🔗

How much code is needed to create a Zig-Zag edge? One Property One Gradient Use an online generator to easily get the code: css-generators.com/custom- [...]

A fancy title divider II 🔗

After the previous one, here is another fancy design for your title No extra element No pseudo element No overflow issue Less than 15 CSS declarations [...]

A fancy title divider 🔗

Turn your titles into a fancy divider using few lines of code No extra element No pseudo element No overflow issue Easy to update using CSS variables [...]

A fancy hover effect using outline 🔗

Add a cool hover effect to your images using a few lines of code No extra element (only the <img> tag) No pseudo element Using only the outline proper [...]

Zig-Zag expanding image panels 🔗

Build an expanding image panels with Zig-Zag edges Minimal HTML Works with any number of images Optimized with CSS variables Flexbox Demo # Read mor [...]

Diagonal split & reveal animation 🔗

Reveal your images with a cool hover effect using a few lines of code Minimal HTML (2 <img> inside a container) Less than 15 CSS declaration Optimized [...]

A CSS-only Speech Bubble 🔗

Create a Speech Bubble using a few lines of code One element No pseudo-element Only 3 CSS properties Optimized with CSS variables Read more [...]

Custom dashed border 🔗

Create a custom dashed border using a few lines of code. No extra element Less than 8 CSS properties Easy to update using CSS variables Read more [...]

Put a number inside boxes 🔗

Make your numbers look fancy by placing each digit inside its own box. Only one element Easy to control using CSS variables Two versions: Full & Borde [...]

CSS-only back to top button 🔗

Create a CSS-only "Back To Top" button with a simple code No JavaScript Control when the button appears Smooth scroll on click Powered by CSS grid and [...]

Navigation menu with sliding items 🔗

Create a simple navigation menu with a sliding effect Minimal HTML code No duplicated text Less than 20 CSS declarations Optimized with CSS variables [...]

Dashed lines using CSS gradient 🔗

Create dashed lines using only one gradient Read more [...]

Heart shape animation using outline 🔗

Add a beautiful animation to a Heart shape and reveal your best images 🥰 😍 No extra element (only the <img> tag) No pseudo-element Less than 10 decl [...]

Turn your image into a heart 🔗

Turn your favorite image into a Heart 💖 using a few lines of code No extra element (only the <img> tag) No pseudo-element Only two CSS declarations [...]

Horizontal lines around your title 🔗

Add horizontal lines around your title using border-image No extra element No pseudo-element No overflow issue Only two CSS properties Optimized with [...]

Float an element to the bottom corner 🔗

Make an element float to the bottom corner of your text content Minimal HTML code No JavaScript No media query Read more [...]

Extend your underline to the edge of the screen II 🔗

Improving the previous effect to consider an underline with a gradient coloration that extend to the edge of the screen No extra element No pseudo-ele [...]

Extend your underline to the edge of the screen 🔗

Add an underline to your title and extend it to the right (or left) edge of the screen whatever the element/container size No extra element No pseudo- [...]

A CSS-only custom cursor 🔗

Create a custom cursor using CSS without external resources. Style your cursor like you do with a simple <div>! Powered by CSS-in-SVG-in-CSS Read more [...]

Extend the background to the edge of the screen 🔗

Extend the background of an element outside of its container to cover the full screen width No extra element No pseudo-element No overflow issue Only [...]

CSS Graph paper pattern 🔗

Create a Graph Paper design using only 2 gradients Read more [...]

Responsive grid of Hexagon shapes 🔗

Create a fully responsive grid of Hexagon shapes (and more!) No media query No JavaScript Minimal HTML code Easy to control using CSS variables Re [...]

Wavy text animation II 🔗

Improving the previous CSS-only Wavy animation Adding another wave Support multi-line of text Read more [...]

Wavy text animation 🔗

Create a Wavy text animation using a few lines of code One element No pseudo element No duplicated text No SVG Optimized with CSS variables Read m [...]

A color overlay above your images 🔗

Add a color overlay above your image using only 3 declarations No extra element (only the <img> tag) No pseudo element Works with rounded image You ca [...]

Tooltip using mask 🔗

Create a Tooltip shape with rounded corners using a few lines of code No extra element No pseudo element Works with any background Easy to control usi [...]

Section divider 🔗

Create a cool divider between your sections in no time using an online generator. css-generators.com/section-divider Read more [...]

Grid with dashed lines 🔗

Create a grid of dashed lines using a few lines of code One property Two gradients Easy to adjust using CSS variables Read more [...]

CSS-only Zoom effect on images 🔗

Apply a zoom effect to your image with a few lines of code: No extra element (only the <img> tag) No duplicated images Only three CSS properties Easy [...]

3D effect on images 🔗

Add a 3D effect to your images with a few lines of code: No extra element (only the <img> tag) No pseudo element No duplicated image A cool animation [...]

CSS-only folded ribbon 🔗

Create a cool Ribbon using one element and a few lines of code. Easy to update using CSS variables No hard-coded values Works with any text content Wo [...]

A single-element spinner loader 🔗

Create a spinner loader using one element and less than 10 CSS declarations Read more [...]

A rounded & dashed underline 🔗

Add a nice rounded dashed underline to your text. No SVG, No image No extra element No pseudo-element Works with multi-lines of text Easy to update us [...]

Equal width buttons to the widest one 🔗

Make a set of buttons equal in width to the widest one using a few lines of code. No JavaScript Works with any number of button Easily switch between [...]

Stick an element to the top-right corner 🔗

Make an element stay at the top-right corner of your responsive grid using one instruction. Read more [...]

A matrix of cubes using one element 🔗

Create a matrix of cubes using only one element. Yes it's possible! Read more [...]

Cut your image into pieces 🔗

Cut your image into small pieces using one CSS instruction. Read more [...]

One big image + thumbnails 🔗

A big image + thumbnails using CSS Grid. Same code for both the horizontal and vertical layout. Read more [...]

Full screen height container 🔗

Make your container fill all the screen height No cascading height:100% No side effects of the 100vh Works with the default margin of <body> No overfl [...]

max-width + centering with one instruction 🔗

Set max-width and center your block element with one CSS declaration using margin-inline and max(). Read more [...]

Hamburger menu icon 🔗

Create a CSS-only hamburger menu icon with 2 gradients. Adjust one value to control the size. Read more [...]

Multi-line text decoration 🔗

Give your your text a fancy looking using box-decoration-break: clone and CSS gradients. Read more [...]

Circular dashed border 🔗

Create a circular dashed border with full control over the dashes. Only one element and a few lines of code are required. Simply update the CSS varia [...]

CSS-only scrolling shadow 🔗

Create a CSS-only Scrolling Shadow effect with a few lines of code. No JavaScript No extra element No pseudo element Only background properties. R [...]

Progress bar with dynamic coloration 🔗

Create a CSS-only progress bar with a dynamic coloration. The color change based on the value No JavaScript No specific CSS selector Read more [...]

One column to control the height of another 🔗

Make one column control the height of another column whatever its content using the contain prorperty. No JavaScript is needed. Below, the right colum [...]

CSS-only plus/cross icon 🔗

Create a plus icon ➕ or a cross icon ✖️ One element No Pseudo element One gradient Easily adjust the size and coloration Read more [...]

Corner-only border around an image 🔗

Create a corner-only border around an image (or any element) using a few lines of code. No extra element No Pseudo-element Only three properties R [...]