Search Resources
Links by Tag
  • 3D
  • A11y
  • AI/ML
  • Animation
  • Audio
  • Backgrounds
  • Blogs
  • Books
  • Branding
  • Business
  • Career
  • CMS
  • Code
  • Colour
  • Community
  • Copywriting
  • CSS Generators
  • Dev Tools
  • Domains & Hosting
  • eCommerce
  • Email
  • Featured
  • Fun
  • Icons
  • Illustrations
  • Inspiration
  • Learning
  • Photography
  • Placeholders
  • Podcasts
  • Productivity
  • Security
  • Self-Hosted
  • SEO
  • Services
  • Software
  • Templates
  • Testing
  • Typography
  • Video
  • WordPress
Toolkit Addy Codes
  • About
  • Suggest
Screenshot of SVG to CSS converter website
Visit Link
https://www.svgbackgrounds.com/tools/svg-to-css/

SVG to CSS converter

Filed under CSS Generators

This tool converts SVG code into a Data URI, an encoded URL format that be used as a background-image source. In plain terms, you can place this converted SVG code directly into CSS and avoid the need for image files.

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 Pattern Generator website
Visit Link
http://www.patternify.com/

CSS Pattern Generator

Filed under Backgrounds, 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 Design Tokens Generator website
Visit Link
https://tokens.layoutit.com/

Design Tokens Generator

Filed under 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.

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

Open Props

Filed under CSS Generators

Supercharged CSS variables.

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

Web Code Tools

Filed under 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 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
Screenshot of SVG to CSS converter website
Visit Link
https://www.svgbackgrounds.com/tools/svg-to-css/

SVG to CSS converter

Filed under CSS Generators

This tool converts SVG code into a Data URI, an encoded URL format that be used as a background-image source. In plain terms, you can place this converted SVG code directly into CSS and avoid the need for image files.

free
Screenshot of CSS Photo Filters website
Visit Link
https://baseline.is/tools/css-photo-filters/

CSS Photo Filters

Filed under CSS Generators

36 beautiful photo filters, with simple editing and CSS to copy. Upload your own photo and select the perfect filter, or modify one to fit your needs.

free
Screenshot of Gorko website
Visit Link
https://github.com/andy-piccalilli/gorko

Gorko

Filed under CSS Generators

A tiny, Sass-powered design-token led utility class generator, with handy helpers, that helps you to power your front-ends with a single source of truth.

free
Screenshot of CSS Stripes Generator website
Visit Link
https://stripesgenerator.com/

CSS Stripes Generator

Filed under CSS Generators

Generate CSS stripes using linear-gradient background images.

free
Screenshot of Animista CSS Animations website
Visit Link
https://animista.net/play/

Animista CSS Animations

Filed under Animation, CSS Generators

Animista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.

free
Screenshot of CSS Layout website
Visit Link
https://csslayout.io/

CSS Layout

Filed under CSS Generators, Learning

Popular layouts and patterns made with CSS.

free

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

© Adam Greenough 2023. All rights reserved. Made with ☕️ in the UK. Proudly hosted with 100% renewable energy 🍃 via Krystal Hosting (affiliate).
Freelance Web Developer About Privacy Submit