My 5 favorite FREE CSS tools
Below are my top 5 FREE CSS tools that have saved me countless hours in web design. These aren’t all the tools in my tool belt, but they help take my Squarespace sites to the next level with even more customization.
Magic Pattern by Jim Raptis. It's saved me hours of digging through w3schools.com and tweaking code. Magic Pattern is perfect to create pro graphics with no effort and no prior design knowledge and their free tier is a fantastic value for $0. My favorite tool has been the Patterns and Gradients. In the patterns tool are 22 different patterns with customizable colors and spacing. They export quickly as a png OR you can copy the css code to your clipboard. With a code block in Squarespace we can paste the code within some brackets and use .section-background to assign it to a background, or to a block ID with another Squarespace block.
Squarespace ID Finder from Heather Tovey. Squarespace ID Finder is a Chrome and Firefox extension that makes it quick and easy to find those section and block IDs mentioned in the first tool. Once added to Chrome I pin the extension for quick access. When viewing your website you see the section and block IDs, clicking on them copies them to your clipboard for use in css.
Neumorphism by Adam Giebl. A neumorphic button uses two shadows to create a raised shape and has become popular in user interface design over the last few years. Neumorphism.io makes this effect is very easy to achieve by playing with a handful of sliders, one at negative values while the other at positive. The code is right there for you to copy and use in your designs. A similar tool I use as well is Smooth Shadow and Box Shadow
Undraw by Katerina Limpitsouni. There are at least 800 designs to browse or search for. I’ve seen healthcare related designs, animals, characters doing a hobby, fitness, you name it, it’s probably here. There is a primary color selector at the top of the page to adjust to your needs and each design can be downloaded as a png or svg.
Chat GPT. If you’ve been living under a rock, Chat GPT is a large language model AI chatbot. It can do more than just write your college papers or cover letter, it can write code! I’m going to ask it to write code for a table. About a solid 2 seconds later we got it. Let’s paste it in a code block and see how it did. What’s impressive about this chat bot is you can continue the conversation. I'm going to ask it to make the top row blue, the remaining rows light gray and the borders white.
