Frontend-resources
Resources for front-end Developers
Topics
-
Colors
-
Images
-
Fonts
-
Icons
-
Logos and SVG BG
-
Alerts
-
Animations
-
Image Sliders
-
Videos and Sounds
-
React UI Tools & Packages
-
Design Templates
-
Useful Tools
Colors
| Name |
Explaination |
| ColorHunt |
Get a list of colors for your needed. |
| ColorMind |
Colormind is a color scheme generator that uses deep learning. It can learn color styles from photographs, movies, and popular art. |
| ColorsWall |
Most popular Palettes color Collections. |
| Coolors |
The super fast color palettes generator |
| BrandColors |
The biggest collection of official brand color codes around. |
Images
| Name |
Explaination |
| Pexels |
The best free stock photos, royalty free images & videos shared by creators. |
| SkitterPhoto |
A place to find, show and share public domain photos. |
| Unsplash |
The internet’s source of freely usable images. |
| Pixabay |
Over 2.6 million+ high quality stock images, videos and music shared by our talented community. |
| Picspree |
Discover and download beautiful royalty free images, stock photos, illustrations, and vectors. |
| FindAphoto |
Browse through over 1 million high-quality stock photos across multiple free and paid stock photo sites - from one tab. |
| FreeImages |
Free Stock Photos & Royalty-Free Images. |
Fonts
| Name |
Explaination |
| GoogleFonts |
Library of around 1000 free licensed font families. |
| 1001 FreeFonts |
The Ultimate Font Download. Download 10,000 fonts for just $19.95. Licensed for personal and commercial use. |
| Fontget |
Free Stock Photos & Royalty-Free Images.Has a variety of fonts available to download and sorted neatly with tags. |
Icons
| Name |
Explaination |
| Flaticon |
3700+ Programing languages icon and logos. |
| Bootstrap Icons |
Free, high quality, open source icon library with over 1,600 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without Bootstrap in any project. |
| Material Design Icons |
Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project. |
| Css Icons |
Icon set made with pure css code, no dependencies, "grab and go" icons. |
| Free Icons |
Best icons for personal and commercial use SVG - PNG. |
Logos and SVG Backgrounds
👉 Logos
| Name |
Explaination |
| Svgporn |
1000+ high-quality SVG logos. |
| Logosearch |
Search engine with over 200,000 SVG logos. |
| Flaticon |
3700+ Programing languages icons and logos. |
👉 SVG Backgrounds
| Name |
Explaination |
| Getwaves |
Customizable backgrounds images |
| Illustrationkit |
Free vector illustrations for personal & commercial projects designe. |
| Freepik |
Find and download the best high-quality photos, designs and mockups. |
| Drawkit |
Hand-drawn vector illustration and icon resources, perfect for your next project. |
| Blobmaker |
Blobmaker is a free generative design tool. Create random, unique, and organic-looking SVG shapes. |
Alerts
| Name |
Explaination |
| Sweetalert |
SweetAlert makes popup messages easy and pretty. |
| Sweetalert 2 |
A beautiful, responsive, customizable, accessible (wai-aria) replacement for javascript's popup boxes replacement. |
Animations
👉 CSS
| Name |
Explaination |
| Animista |
CSS animation. Smooth Text, Box-modal, hover animation. |
| Loaders |
This is a library having a collection of different types of CSS loaders, spinners. |
| CSSloaders |
Awesome collection of beautiful loading spinners. |
| Animate |
Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints. |
| Hover.css |
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. |
| Tholman |
Animations for the strong of heart, and weak of mind. |
| Motion UI |
A Sass library for creating flexible CSS transitions and animations. |
| Tholman |
Animations for the strong of heart, and weak of mind. |
👉 Javascript
| Name |
Explaination |
| Animation on Scroll |
Animate on scroll library to reveal animations when You scroll. |
| Wow.js |
Reveal Animations When You Scroll. |
| Greensock |
Reveal Animations When You Scroll. |
| ParticlesJS |
A lightweight JavaScript library for creating particles. |
| SimplePARALLAX |
The easiest way to get a parallax effect with javascript. (Scroll effect) |
Image Sliders
| Name |
Explaination |
| SwiperJs |
The Most Modern Website and Mobile Touch Slider. |
| SplideJs |
Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors. |
| SequenceJs |
The responsive CSS animation framework for creating sliders, presentations, banners, and other step-based applications. |
Videos and Sounds
| Name |
Explaination |
| Pexels |
The best free stock videos shared by the Pexels community. |
| Pixabay |
Stunning free stock video footage & clips. |
| Videvo |
Free and premium awesome stock videos |
| Free-Stock-Music |
Royalty free stock music for attractive videos, YouTube videos, podcasts, etc. |
| Bensound |
Royalty Free Music for Creators. |
React UI Tools & Packages
| Name |
Explaination |
| Smooth Scroll |
React Provider Component to add a smooth scroll effect |
| React Gsap |
React Gsap lets you use the GreenSock Animation Platform (GSAP) in React in a fully declarative way. |
| REACT SPINNERS |
Some awosome loading effects. |
| React Preloaders |
Package for adding preloaders to your react app. |
| React Type Animation |
A customizable React typing animation component. |
| React Animated Text |
AA component to animate your text in React! Use predefined animation type or compose your own one. |
| Custom Cursor React |
Animated, customizable and interactive cursor for React |
| AtroposJs |
Javascript library to create stunning touch-friendly 3D parallax hover effects. |
| Mouse Image Move |
React.js package for smooth moving image with mouse move. |
Design Templates
| Name |
Explaination |
| Ohio-Clbthemes |
A website With best in class features and design templates. |
| Envato Elements |
Unlimited downloads of 60+ million creative assets and Templates. |
| Templatemonster |
The collection of items includes a wide choice of website templates suitable for all kinds of niche-specific projects. |
| Siteinspire |
Siteinspire is a showcase of the finest web and interactive design. |
| Webdesign-inspiration |
This is a web design inspiration gallery and the best website design ideas . |
| Awwwards |
The awards of design, creativity and innovation on the internet. |
| Screenlane |
The latest mobile UI design inspiration in your inbox every week, for free. |
| Dribbble |
Explore the world’s leading design portfolios. |
| Free Design resources |
Crafted with love from amazing artists and professional designers around the world, ranging from fonts, mockups, graphics, templates & more. |
Tools
| Name |
Explaination |
| TinyPng |
Smart WebP, PNG and JPEG compression. |
| I love Pdf |
Every tool you need to work with PDFs in one place. |
| Box-Shadows |
Beautiful CSS box-shadow examples. |
| Colors From Image |
Get color codes by uploading file from your computer or insert link. |
| Figma |
All the elements you need to create amazing logos, social media graphics, presentations and more, for free. |
| Canva |
Online design tools |
| Removebg |
Remove and change the background of image on online. |
| Unscreen |
Remove Video Background 100% Automatically and Free. |
| Glass UI |
Glass UI is a free and open-source CSS library based on the glassmorphism design specifications. |
| Mobile-friendly Test |
Test how easily a visitor can use your page on a mobile device. |
frontend-resources copied to clipboard
Ashik045
Ashik045