📦 #002 - CSS Generators and Illustrations
A collection of killer resources that will make you stay ahead the curve
Hi, this is Madza! 👋
Welcome to The Second issue of The Developer Toolbox!
This month I compiled useful gradient and background generators, as well as awesome illustration resources to use in your next projects.
To make it easier to navigate, I divided everything into categories, gave descriptions, and included direct links.
First, I want to thank the Sponsor of this issue! 💖
SVGator is the ultimate online SVG animation tool. It’s packed with a free full-featured SVG creator and editor, and advanced animators and tools you need for no-code animation – all within an intuitive interface, right at your fingertips.
Animate icons, logos, backgrounds, and more. Power up your SVG projects with path, morph, filter, or color animations. Then export as .svg for the web, .js/.dart for mobile, or video formats for literally anywhere!
Take your SVG to a whole new level without writing a single line of code! 🚀
🎨Gradient generators
Create unique gradients without manually tweaking CSS
Web Gradients - A free collection of 180 linear gradients that you can use as content backdrops in any part of your website. Easy copy CSS3 cross-browser code and use it in a moment!
MeshGradient - A design tool to generate beautiful & colorful mesh gradients. Generate multiple random variations of mesh gradients along with cool color customizations.
Mesh-gradients - Free, handmade mesh gradients for your next project. Gradients in .sketch, .png, .ai, .jpg, .eps. Download and use in your commercial and personal projects.
Grabient - Add up to 6 colors, and change the angle of the gradient with the modern-looking UI.
UI-Gradients - Browse lots of predefined gradients from the gallery and edit the gradient direction in the generator. Opensource, add your own gradients via code.
Gradient King - Browse lots of gradients based on the color theme. Also includes an option to generate the gradient based on uploaded image colors. Option to sign in and save your favorites.
CoolHue - Try Coolhue Gradient Palette Plugin. With it, you can directly access the gradient colors palette from right inside your favorite prototyping tools like Sketch App and Figma.
GradientHunt - Gradient Hunt is a free and open platform for color inspiration with thousands of trendy hand-made color gradients.
CSS Gradient - Gradient generator with a modern-looking UI and lots of customization options.
Gradient Png - supports adding up to 5 colors, switching their positions, changing their weight, and other customization options. Random mode to come up with awesome presets.
HyperColor - A curated collection of beautiful Tailwind CSS gradients using the full range of Tailwind CSS colors. Easily copy and paste the class names, CSS, or even save the gradients as an image.
Mycolor space - Generate a CSS Color Gradient with 2 or 3 colors. Change directions and copy the CSS code when ready.
Color Gradient - CSS color generator for cool backgrounds and UI elements.
Gradient Generator - Advanced CSS gradient generator by Josh W Comeau. Lots of customization options such as color mode, angle, and easing curve.
CSS Gradient Generator - Create linear and radial gradients. Experiment with random color modes and edit gradient directions. Switch between HEX and RGBA modes.
🧙 Backgrounds generators
Make beautiful backgrounds with various patterns and shapes
Haikei - An all-around generator with blob, wave, gradients, low poly, and other modes, that can be further individually customized.
BgJar - A free generator with modes like polygon, blob, colored shapes, curved lines, overlays, and others, with options to change width, height, and colors for each layer.
CoolBackgrounds - A collection of tools to create compelling, colorful images for blogs, social media, and websites. Includes abstract triangle, particle, gradient, topography, and image modes.
SVGBackgrounds - Create stunning websites easily with fullscreen graphics under 5KB. Click a background to begin customizing colors and other attributes, such as opacity, scale, and stroke.
SVG patterns - 21 free SVG background pattern collections. Click on the preset to see the preview and click to Get the code to generate the SVG code in the JSbin editor.
SVG gradient waves - Generate your own favorite SVG Wave. Use gradients, randomness, and other parameters to generate gorgeous SVG waves to use in your next design!
PatternPad - A tool to create beautiful design patterns. Comes with a bunch of presets and lots of customization options like column and row sizes, density, shapes, and more.
Pattern Monster - A simple online pattern generator to create repeatable SVG patterns. Perfect for website backgrounds, apparel, branding, packaging design, and more.
Visiwig - A free vector pattern generator. Customize seamless patterns and export for the web or your favorite vector software.
HeroPatterns - A collection of repeatable background patterns for you to use on your web projects. Lots of presets to choose from and customization options for background and foreground colors.
Gradienta - Lightweight, colorful, responsive backgrounds for personal and commercial projects. It is free to use and an open-source project.
Tabied - An artwork gallery. The user is required to select the preset, then edit the palette colors, column, and row count as well as shape frequency.
Animated CSS - An animated background generator. Comes with three presets with options to customize the color of the background as well as the count of elements and their size and speed.
Pattern-CSS - CSS-only library to fill your empty background with beautiful patterns. Easy-to-read docs with usage instructions as well as great templates to get started.
🤩 Illustration Resources
Get professional-looking illustrations for your future projects
unDraw - A design project with beautiful SVG images that you can use for free. You can select the dominant color of the illustrations, so you can easily adapt them to your designs.
IRA Design - You have the option to choose, play and mix 5 gradient colors to suit each character you want to use in your project. Lots of topics to choose from characters, objects, backgrounds, etc.
Ouch - Ouch helps creators unable to draw overcome the lack of quality graphics. Download free PNG and SVG illustrations to enhance your product.
DrawKit - Awesome hand-drawn vector illustration and icon resources. The illustrations are sorted via thematic packs, including up to 100 illustrations per pack.
Humaaans - Mix-and-match illustrations of people. Change the hairdos, tops, pants, etc. Rotate and position the elements in your humans however you like.
Illu-Station - An easy-to-use site, with lots of quality illustrations. Similar to unDraw, users can also set the main color to adjust illustrations to the theme of your project.
Blush design - Choose a collection from multiple styles, play around with the variations until you create the art that tells your story, and download a PNG or SVG of your creation.
Glaze - Illustrations are sorted across categories such as people, places, teamwork, animals, mindfulness, business, health, technology, etc. Free illustrations are available as PNG.
ManyPixels - Various illustration types such as outline, monochromatic, isometric, flatline, and two-color. Users are allowed to set the main color for the illustrations to adjust to your specific design.
Open Doodles - A unique collection of vector illustrations based on hand-drawn sketches. Download the source files or play with the Generator to create your own.
StorySet - Awesome free customizable illustrations for your next project. Thanks to their online editor, you can even animate the illustrations to give them some life.
Skribbl - A growing collection of freely usable, hand-drawn illustrations brought to you by a global community of aspiring creatives.
OpenPeeps - Hand-drawn people illustrations. The library works like building blocks made of vector arms, legs, and emotions. You can mix these elements to create different Peeps.
Illustratious - A nice collection of colorful illustrations and animated Lottie files.
Lukasz Adam Illustrations - Download the illustration pack created by an illustrator, designer & developer Lukasz Adam. Free for commercial and personal use under the MIT license.
Absurd design - If you are looking for something out of the box and want to stand out from the crowd, these illustrations are highly recommended.
I really hope these resources provided practical value for you! If so, make sure to connect with me on Twitter and LinkedIn for daily content!
Also, I already have tons of ideas for the upcoming issues, so if you liked the first one make sure to share it with your friends and subscribe below!
Great list
found useful bro!!