Useful for: Anyone who wants to level up their CSS layout skills (flexbox and grids)
This website is all about helping developers get better at CSS layouts in a fun, hands-on way. It’s like a playground where you can practice using CSS Grid and Flexbox to create cool, responsive layouts. You write code, see the results instantly, and tackle challenges that mimic real-world layout problems and whether you’re just starting out or brushing up on your skills, it’s a great way to learn by doing.
Useful for: Getting quick and clean clip-path CSS code.
This website is for creating cool shapes on the web. Made by Bennett Feely, this tool lets you easily generate CSS clip-path code for all kinds of shapes—polygons, circles, stars, and more. Instead of struggling with complex code, you can just tweak a few settings, copy the code, and voilà! You’ve got a unique shape ready to use in your design.
Useful for: Adding quick background patterns to the UI.
This website contains a collection of over 100 free pattern backgrounds created using CSS, these patterns can be used to add textures to hero sections, as background layers/overlays, used in the footer design or hover effects for creating beautiful CSS backgrounds. It’s part of the Super Designer toolkit and makes it really easy to customize the patterns and textures—all with just a few clicks. You can play around with colors, and styles to create something truly unique, and you get the clean CSS code ready to use in your project.
Useful for: Beginners who want to learn more about CSS Grids
This website is a playful and interactive way to learn CSS Grid. Created by Thomas Park , it turns CSS grids into a game where you grow a garden by the code. Each level introduces new concepts, like aligning plants or watering specific plots, making it a fun and engaging way to get comfortable with CSS Grid.
Useful for: Designers and developers who want to ensure their typography is balanced and professional.
This website is a great tool for creating balanced and visually appealing typography scales for your projects. It allows you to experiment with different font sizes, ratios, and scales (like the golden ratio, perfect fifth, or modular scale) to find the perfect typography hierarchy. You can preview how your text will look, adjust settings, and get the corresponding CSS code to implement it seamlessly into your website.
Useful for: Creating CSS animations to add to your websites
This website is like a shortcut for creating smooth CSS animations. It’s super easy to use—just tweak settings like timing, easing, and movement, and it spits out clean CSS code for you. Whether you’re adding a subtle hover effect or a full-blown animation, this tool makes it really easy.
Useful for: Modifying unique patterns & visuals to add to the user interface.
This is a very useful tool for generating unique, customizable SVG shapes, blobs, waves, and other design elements. It’s perfect for adding visual flair to your projects. With a simple interface, you can tweak colors, shapes, and patterns, and then download the assets as SVG or PNG files. Whether you need a background, a divider, or a decorative element, Haikei makes it quick and easy to create something eye-catching.
Useful for: Getting simple loading animations.
This is a handy resource for finding and customizing simple, ready-to-use CSS loading animations. It offers a wide variety of pre-built loaders, from simple spinners to more complex animations, all made with pure CSS. You can preview the animations, tweak the code, and easily copy it into your project to keep users engaged while content loads.
Useful for: Adding scalable icons to projects without the hassle of managing image files or external libraries. It’s perfect for anyone looking for a lightweight, customizable icon solution.
This is a minimalist icon library built entirely with CSS. It offers over 700 customizable, open-source icons that are lightweight and easy to use in your projects. Each icon is designed with pure CSS, meaning no images or external dependencies are required. You can easily copy the code, adjust the size and color, and integrate the icons seamlessly into your website or app.
Useful for: Applying and testing cool effects to images using CSS filters.
This is a visual playground for experimenting with CSS filter effects. It lets you apply and customize filters like blur, grayscale, brightness, and contrast directly on an image, showing the results in real time. Once you’ve tweaked the effects to your liking, you can grab the CSS code and use it in your own projects. It’s a simple and fun way to add creative touches to your images without needing any design software.
Thanks for reading! ⭐
I hope you found this list helpful! You can bookmark and share with others. If you have any other CSS tools you consistently use, you can add it in the comments below!
