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 extend to the edge of the page.
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 extend to the edge of the page.
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 works as expected!
In most cases, adding an extra value will fix your issue.
]]>Updating the previous rounded tab shape to create the vertical version using the same code structure.
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 use it everywhere.
As a bonus, you can also have an integer value!
]]>Create folded rectangle shapes with a subtle 3D effect
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 add new lines.
We saw the selector for the first occurrence and here is the selector for the last occurrence.
]]>A CSS selector to select the first occurrence of an element regardless of its position in the document. The equivalent of document.querySelector('.target').
After the previous effect, I am trying another concept of 3D parallax effect with a better illusion!
<img> tag)
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. You can save up to 32 chars!
]]>Place you image inside a rhombus shape with a cool hover effect
<img> tag)
Do you know that the below declarations are the same?
]]>Create different kind of puzzle shapes using a few lines of code
<img>)
Adding a new set of loaders to the biggest collection of loading animations.
One example:
]]>Many have a wrong information about the default behavior of position: absolute element.
"if an absolute positioned element has no positioned ancestors, it uses the body element" NO, this is false!
The W3Schools page is showing a wrong information but the MDN page is showing the correct one.
 |
 |
What is the initial containing block?
It's a rectangle having the same dimension as the viewport (full width/height) and anchored at the canvas origin (moves on scroll). In other words, it's similar to the viewport but moves if we have scrolling.
Here is a demo to illustrate:
]]>Only three lines of code and you have a smooth transition to height: auto
Do you want to convert a length value to a unitless value?
It's possible to remove the unit from any CSS value to get an integer!
⚠️ A hacky experimentation to use with caution ⚠️
]]>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 lines of CSS, one HTML element and you can update any value in real time.
]]>Adding a tooltip to the native progress element showing the percentage of progress.
<progress> tag)@property
It's a Chrome-only experimentation:
]]>I am using the inner curve/notch shape to create a fancy header with an avatar and a cool hover effect.
@property and math functions
Create an inner curve/notch shape using CSS mask and a few lines of code
Adjust the below to get your quantity query selector!
]]>Create a nice decorative line with rounded dashes using a few lines of code
Code available here: css-shape.com/rounded-dashes
Resize the below demo to notice the responsive part
]]>Use an online generator to create fancy wavy circles in no time!
css-generators.com/wavy-circle
<img> element
Related: css-tip.com/wavy-circle
]]>Create an arc shape with rounded edges using a few lines of 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 using a few lines of modern CSS! No need for JavaScript and you get the value as a CSS variable defined at :root level.
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 number of lines inside a text.
]]>Use modern CSS features to get the width and height of any element as CSS variables.
@propertyThe 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 inside the scroll() value.
Get the scroll progress of the page as a CSS variable using a few lines of code
:root level (avaiable to all the elements)Add a slider to adjust the font-size of your website using modern CSS features.
Stop defining your variables inside :root!
Use the @property instead and create "Typed CSS Variables"
Instead of doing this:
]]>Get the screen width and height as pixel values using a few lines of CSS.
@property & trigonometric functionsSave this code for the future! It will be the easiest way to add a gradient coloration to borders while having rounded corners.
⚠️ There is no implementation yet, but it's good to know.
]]>Use CSS mask to create an inverted radius corner with a minimal code.
Transforming the native progress element into a circular one.
<progress> tag)@property
It's a Chrome-only experimentation:
]]>Create a random-style background (grainy texture) using a few lines of code.
A few experiemntation usign Anchor Positioning to create fancy hover effects. Highlight the menu items with a sliding effect.
]]>A simple code to easily invert any shape created using clip-path: polygon(). An easy way to create Cut-out shapes.
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 the radius will adjust when the tail get closer to the corners.
Powered by modern CSS features:
@property & CSS variablesEnhance your text wrapping using text-wrap. No more lonely words at the end of paragraphs, and titles will look much better.
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!
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:
]]>css-pattern.com: The Biggest Collection Of Background Patterns
You can also surprise yourself with a random CSS Pattern!
Turn a simple input into single-digit inputs using a few lines of CSS. Useful for One-Time Password fields.
<input> element)
How much code is needed to create a Sparkle shape? ✨
Only one gradient and you can easily get the border-only variation.
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 do some color manipulation.
]]>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 selector will match the root element!
A one-character selector 🤯
⚠️ It has a lower specificity than html and :root
]]>Use modern CSS to add a status indicator to your avatar using less than 10 CSS declarations and without extra elements.
<img> tag
css-shape.com: The Ultimate Collection of CSS-Only shapes
The modern way to create CSS Shapes
A lot of new CSS features can help you optimize your code and reduce redundancy.
Here is an example of a CSS code with a lot of redundancy
]]>Use modern CSS to create a fancy Zig-Zag border around images using a few lines of code.
<img> tag)⚠️ Not suitable for touch screen (the sharp edges may hurt you) use wavy borders
Create a Star shape using clip-path and only 5 points instead of 10.
Three different codes to create the same shape
Use modern CSS to cut the corner of an image with a pixelated effect.
<img> tag)
Use modern CSS to create those famous rounded tabs with inner curves.
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 within a specific range. Very useful if you have some calculation based on the font-size like using the em unit. No more rounding issue!
Use modern CSS and add a cool Wavy divider to your section. Only one property and two gradients are needed.
Add a hover aniamtion with a fancy fragmentation effect using only the <img> tag. Powered by CSS Mask, @property and optimized with CSS mask
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 slowly on mouse-out as well.
]]>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
Transform your image into a cool postage stamp with a few lines of code
<img> tag)
Place you image inside a wavy circular frame powered by modern CSS (mask, trigonometric functions, @property, animation-composition and more)
<img> tag)
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>, <iframe>, <canvas>, <video>, etc.
⚠️ They won't get centered ⚠️
They will look centered but in reality, they are not and this is not a bug!
Images and similar inline-level elements have that strange white space under them due to the default baseline alignment, and that space is preserved when using align-content because we align the "whole content"
So don't forget to get rid of that space using vertical-align: top
That space may look small but it can make a difference especially if you use a big font-size.
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 argument and they will, by default, round your element. circle() is a particular case of the ellipse() and is useful with square elements.
The browser will default circle() to circle(closest-side at center) and ellipse() to ellipse(closest-side closest-side at center)
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 then click!
More CSS Shapes: css-shape.com
]]>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 code won't work the same way if you use it as a CSS code.
The below code won't give the same result when used with CSS Nesting and Sass
]]>Another variation of the previous effect using the same code structure
<img> tag)
Turn your image into a heart shape with a lovely hover animation 😍
<img> tag)
Creating a basic triangle shape is as simple as using two CSS properties
aspect-ratioclip-path (with a 3-point polygon)That's it, and it works with any kind of elements including images.
Get the CSS code from: css-generators.com/triangle-shapes
]]>Use modern CSS to:
All of this, using only 3 properties and easy to control with CSS variables
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 decide when to use them
You start with clamp() then:
max()min()
If you want to set a max-width to your element then it's min()
width: clamp(min,100%,max) ➞ width: min(100%, max)
Use the magic border-image and add as many borders as you want to your images for a fancy decoration
Create a simple ribbon shape with a cool hover effect
Improving the previous effect to consider a gradient coloration instead of a solid color. Using the same code structure.
Place your image inside a fancy frame! Wavy borders on all the sides 🤩
<img> tag)round() function 🥳
A modern way to create a triangle with rounded corners
An easy and modern way to create Octagon shapes
An easy and modern way to create Hexagon Shapes
Don't let your images fall. Stick them with some adhesive tape! A CSS-only solution using a single element.
Add a fancy decoration to the corners of your image using a few lines of code
<img> tag)
Add a border with an inner radius to your image using a simple code.
An horizontal list is good but a circular one is better 🤩
Another list of stacked avatars using the same code structure
Create a list of stacked avatars with a cool hover effect and with transparency
Add a cool 3D effect to your name or your favorite number
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, No pseudo-elements) and a touch of magic 🪄
Place your image inside a 3D box and reveal it with a cool hover effect. Perfect for your virtual gifts 🎁
<img> tag)
Add a fancy reveal effect to your images with a few lines of code
<img> tag)
Another variation of the previous effect with infinite stripes
Another variation of the previous effect where you can add a diagonal infinite shadow to your rounded image.
<img> tag)
Add a reveal animation to your image with a simple code
Create a ribbon shape with a fancy reveal effect on hover
Add a fancy hover effect to your image with a gradient border
<img> tag)
The smallest code to create a simple Tooltip Shape
Another concept of 3D text with a minimal code
Add a touch of 3D to your text using a few lines of code
After the previous one, here is another concept of Responsive Ribbon Shape using the same code structure.
Transform your title into an Infinite Ribbon Shape using a few lines of code
Place your text inside a responsive ribbon shape using a few lines of code.
Create a fancy ribbon shape with a few lines of code
Place your title into a fancy Ribbon Shape with a cool hover effect 😍
Turn your title into a fancy Ribbon Shape 🎀
Another fancy "Pop out" hover effect using modern CSS. The spiky variation of the previous effect
<img> tag)
Add a slanted underline to your text with a nice hover effect using a simple code
Place your image inside a Starburst shape with a cool rotation 🤩
<img> tag)Get the code in no time using an Online Generator for Starburst Shape
Add an infinite shadow to your image in any direction using a few lines of code
<img> tag)
Create a fancy hover effect with small circles rotating around your image.
<img> tag)@property
Add a simple border around your image with a nice hover effect
<img> tag)
Add a nice frame around your image with a cool hover effect
<img> tag)
Place 2 images next to each other with a Zig-Zag separation ⚡️
Zig-Zag edge generator 👉 css-generators.com/custom-borders
Add a fancy "Pop out" hover effect to your avatar using modern CSS. Another variation of the previous effect
<img> tag)
Add a nice "Pop out" hover effect to your avatar using a minimalist code
<img> tag)
Add a nice reveal animation to your image with a few lines of code
<img> tag)
A simple design for your checkbox with a nice animation on click.
<input> tag)
Add a fancy reveal animation to your image on hover
<img> tag)
Another variation of the previous hover effect with a diagonal reveal. Using the same code structure.
<img> tag)
Reveal your images with a nice hover effect and a few lines of code
<img> tag)
Create a perfect color wheel with multiple colors using conic-gradient()
Add a simple zoom effect on hover for your images with a small code
<img> tag)Add corner-only borders to your images with a nice hover effect
<img> tag)
Add an overlapping border to your image with a nice hover effect
<img> tag)
Add a 3D trailing shadow to your image with a few lines of code
<img> tag)
Add a reveal animation to your image with a simple and nice hover effect
<img> tag)
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 situations.
Use an index like any programming language to iterate through the array. Practical when you are already using an index for something else.
Add a fancy 3D animation to your image with a cool hover effect
<img> tag)
Did you ever wanted to slow down a rotating element on mouse hover? You can easily do it with a simple code:
Add a reveal effect to your image with a sliding animation on hover
<img> tag)
Reveal the colors of your images with a sliding animation on hover
<img> tag)
Add a 3D effect to your image with a shiny animation on hover ✨
<img> tag)
Transform your image into a Rhombus shape with rounded corners using a few lines of code
<img> tag)
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?
You can do it with border-image!
Only one line of code and you have your overlay 🤩
Transform your 2D image into a 3D one using a few lines of code
<img> tag)
Add a fancy 3D effect to your image with a simple code
<img> tag)
Add a folded ribbon to the corner of your container using a few lines of code
Add a ribbon style to your title that extend to the edge of the screen.
Add a slanted background to your container that extend to the edge of the screen.
Do you want to have a radius inside the element but not outside? You can do it using only one property 🤩
Do you want to select all the elements between two different class names? Use the :not() selector to do it
]]>Adding more variations to the previous reveal animation using the same tricks
<img> tag)
Add a simple reveal animation to your images using a few lines of code
<img> tag)object-fit and object-positionAdd a fancy hover effect to your image with a small code. Transform your image into little rotating squares!
<img> tag)Pay attention to the support of the @property.
Create a cool CSS Ribbon with a few lines of code
Create a nice 3D Zig-Zag edge with a simple code:
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!
]]>Use @counter-style to customize your <ol> list with a simple code
counter()
Use modern CSS tricks to create fancy range sliders with a little code
<input> element)
Use conic-gradient() and the new color interpolation to create a nice color wheel 🤩
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.
Use the new color-mix() to manipulate the Hue of a color in the HSL color space
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
Use the new color-mix() function to create a color switch with a compact code
Use online generators to create CSS shapes using clip-path in no time!
An online tool to create fancy CSS shadows with gradients coloration. Get the code in One click 🌟
border-radiuscss-generators.com/gradient-shadows
Create a border-only Tooltip with a few lines of code
border-radius
Use the new color interpolation to easily create an infinite rainbow animation using CSS gradients 🌈
Add a cool text reveal animation to your image card
Add a nice frame around your image using a few lines of code
<img> tag)
Use the :has() selector and style your container based on its number of elements (direct children)
⚠️ It doesn't count text nodes. Only tags!
]]>How much code is needed to create a Wavy Shape?
Use an online generator to easily get the code: css-generators.com/wavy-shapes
Create an infinite image carousel using a few lines of code:
<img>s inside a container)How much code is needed to cut the four corners of an element? Also known as inverted border-radius
Use an online generator to easily get the code: css-generators.com/custom-corners
How much code is needed to create a Zig-Zag edge?
Use an online generator to easily get the code: css-generators.com/custom-borders
After the previous one, here is another fancy design for your title
Turn your titles into a fancy divider using few lines of code
Add a cool hover effect to your images using a few lines of code
<img> tag)
Build an expanding image panels with Zig-Zag edges
Reveal your images with a cool hover effect using a few lines of code
<img> inside a container)
Create a Speech Bubble using a few lines of code
Create a custom dashed border using a few lines of code.
Make your numbers look fancy by placing each digit inside its own box.
Create a CSS-only "Back To Top" button with a simple code
Create a simple navigation menu with a sliding effect
Create dashed lines using only one gradient
Add a beautiful animation to a Heart shape and reveal your best images 🥰 😍
<img> tag)
Turn your favorite image into a Heart 💖 using a few lines of code
<img> tag)
Add horizontal lines around your title using border-image
Make an element float to the bottom corner of your text content
Improving the previous effect to consider an underline with a gradient coloration that extend 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
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
]]>Extend the background of an element outside of its container to cover the full screen width
Create a Graph Paper design using only 2 gradients
Create a fully responsive grid of Hexagon shapes (and more!)
Improving the previous CSS-only Wavy animation
Create a Wavy text animation using a few lines of code
Add a color overlay above your image using only 3 declarations
<img> tag)You can also have a cool transition on hover
Create a Tooltip shape with rounded corners using a few lines of code
Create a cool divider between your sections in no time using an online generator.
css-generators.com/section-divider
Create a grid of dashed lines using a few lines of code
Apply a zoom effect to your image with a few lines of code:
<img> tag)
Add a 3D effect to your images with a few lines of code:
<img> tag)
Create a cool Ribbon using one element and a few lines of code.
Create a CSS-only loader with a simple code.
<div>
Add a nice rounded dashed underline to your text.
Make a set of buttons equal in width to the largest one using a few lines of code.
Make an element stay at the top-right corner of your responsive grid using one instruction.
Create a matrix of cubes using only one element. Yes it's possible!
Cut your image into small pieces using one CSS instruction.
A big image + thumbnails using CSS Grid. Same code for both the horizontal and vertical layout.
Make your container fill all the screen height
height:100%100vh<body>Set max-width and center your block element with one CSS declaration using margin-inline and max().
Create a CSS-only hamburger menu icon with 2 gradients. Adjust one value to control the size.
Give your your text a fancy looking using box-decoration-break: clone and CSS gradients.
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 variables to control the design of the border.
Create a CSS-only Scrolling Shadow effect with a few lines of code.
Create a CSS-only progress bar with a dynamic coloration. The color change based on the value
Make one column control the height of another column whatever its content.
Below, the left column will control the right column.
No JavaScript is needed, only three lines of CSS will do the job
Create a plus icon ➕ or a cross icon ✖️
Create a corner-only border around any element.
You can also animate it on hover!
