Search Resources
Links by Tag
  • 3D
  • A11y
  • AI/ML
  • Animation
  • Audio
  • Backgrounds
  • Blogs
  • Books
  • Branding
  • Business
  • Career
  • CMS
  • Code
  • Colour
  • Community
  • Copywriting
  • CSS Generators
  • Design
  • Dev Tools
  • Domains & Hosting
  • eCommerce
  • Email
  • Featured
  • Fun
  • Icons
  • Illustrations
  • Inspiration
  • Learning
  • Marketing
  • Photography
  • Placeholders
  • Podcasts
  • Productivity
  • Security
  • Self-Hosted
  • SEO
  • Services
  • Software
  • Templates
  • Testing
  • Typography
  • Video
  • WordPress
Toolkit
  • About
  • Suggest
Screenshot of Smooth Shadow website
Visit Link
https://shadows.brumm.af/

Smooth Shadow

Filed under Code, CSS Generators

Generate ultra-smooth looking CSS shadows.

free

Report a problem with this link

Welcome to Toolkit! 🧰

Toolkit is a curated collection of tools & resources for people who make websites. Follow on Twitter for a fresh link daily or browse the site to discover the growing collection.


More from CSS Generators

View all CSS Generators  
Screenshot of CSS Keyframes Animation Generator website
Visit Link
https://keyframes.app/animate

CSS Keyframes Animation Generator

Filed under Animation, CSS Generators

Create CSS @keyframe animations with a visual timeline similar to video editors.

free
Screenshot of CSS Accordion Slider Generator website
Visit Link
https://accordionslider.com/

CSS Accordion Slider Generator

Filed under CSS Generators

Create fully responsive, css only accordion sliders.

free
Screenshot of CSS Box Shadows Generator website
Visit Link
https://boxshadows.xyz/

CSS Box Shadows Generator

Filed under Code, CSS Generators, Design

Create, edit, and generate multiple custom CSS box shadows with ease.

free
Screenshot of CSS Loader Generator website
Visit Link
https://wweb.dev/resources/loader-generator

CSS Loader Generator

Filed under Code, CSS Generators, Icons

This CSS generator helps you to create simple CSS spinners. You can choose between four different types of CSS loading spinners and adjust the settings. Afterward, you can easily copy the CSS code for usage on your website.

free
Screenshot of CSS Pattern Generator website
Visit Link
http://www.patternify.com/

CSS Pattern Generator

Filed under Backgrounds, Code, CSS Generators

Draw your pattern on the grid. You can use the cursors to limit the drawing surface and control the tiling. Once you're done, just download the PNG (make sure to rename it and add the ".png" extension at the end) or copy the code to your CSS. And you can also get a unique URL to share with other pattern aficionados.

free
Screenshot of Golden Ratio Typography Calculator website
Visit Link
https://grtcalculator.com/

Golden Ratio Typography Calculator

Filed under CSS Generators, Design, Typography

Discover the perfect typography for your website by entering your current (or desired) font, font size, and/or content width. Experiment with different fonts, sizes, and widths to see what works best. Optimize for the ultimate reading experience on any device.

free
Screenshot of Font style matcher website
Visit Link
https://meowni.ca/font-style-matcher/

Font style matcher

Filed under CSS Generators, Typography

If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.

free
Screenshot of Design Tokens Generator website
Visit Link
https://tokens.layoutit.com/

Design Tokens Generator

Filed under Code, CSS Generators, Dev Tools

Quickly create Design System tokens and get JSON, CSS and SASS code. Use our Design Tokens generator to quickstart your next project!

free
Screenshot of Fluid Typography Editor website
Visit Link
https://modern-fluid-typography.vercel.app/

Fluid Typography Editor

Filed under CSS Generators, Typography

Fluid typography is a modern way of approaching responsive typography. Instead of setting fixed typography values for individual screen sizes, we can set a single fluid value and let the CSS render the appropriate values for a specific screen size constrained by minimum and maximum values.

open source
Screenshot of Open Props website
Visit Link
https://open-props.style/

Open Props

Filed under CSS Generators

Supercharged CSS variables.

open source
Screenshot of Web Code Tools website
Visit Link
https://webcode.tools/

Web Code Tools

Filed under Code, CSS Generators

Code generators to help you with your front-end web projects. CSS, HTML, OpenGraph, JSON, Meta Tags, Twitter Cards and more.

free
Screenshot of CSS Code Generators website
Visit Link
http://csscodegenerators.com/

CSS Code Generators

Filed under Code, CSS Generators

Everything you need to generate awesome CSS for your next project. Customize your options and voila, your CSS code is ready to copy and paste into your project!

free

But wait, there's more! 🧰✨

Check out the sidebar menu (or tap the in the bottom right on mobiles) to search and browse by tag.

3D
A11y
AI/ML
Animation
Audio
Backgrounds
Blogs
Books
Branding
Business
Career
CMS
Code
Colour
Community
Copywriting
CSS Generators
Design
Dev Tools
Domains & Hosting
eCommerce
Email
Featured
Fun
Icons
Illustrations
Inspiration
Learning
Marketing
Photography
Placeholders
Podcasts
Productivity
Security
Self-Hosted
SEO
Services
Software
Templates
Testing
Typography
Video
WordPress
3D
A11y
AI/ML
Animation
Audio
Backgrounds
Blogs
Books
Branding
Business
Career
CMS
Code
Colour
Community
Copywriting
CSS Generators
Design
Dev Tools
Domains & Hosting
eCommerce
Email
Featured
Fun
Icons
Illustrations
Inspiration
Learning
Marketing
Photography
Placeholders
Podcasts
Productivity
Security
Self-Hosted
SEO
Services
Software
Templates
Testing
Typography
Video
WordPress

Toolkit by Addy Codes is a curated collection of tools and resources for people who make websites.

Make friends making the web on our Discord community. ✨

Webwide is an inclusive, supportive Discord community of professional and hobbyist web designers & developers.

Discord Join Webwide on Discord
As an Amazon Associate I earn from qualifying purchases.
Proudly hosted with 100% renewable energy 🍃 at Krystal Hosting (affiliate).
© Addy Codes 2023. All rights reserved. Made with ☕️ in 🇬🇧.
Freelance Web Developer   About   Privacy   Submit