CSS Tools Collection - background,border,shadow,color select

Updated on November 17, 2023 View Times: 883

Share on Twitter

Clip Path Maker


Fancy Border Radius

Border radius is a common and critical CSS feature that you can easily set up. But have you ever needed a precise border-radius size and shape and spent too much time fiddling with the settings to acquire the exact desired value? This tool allows you to change the form and size of the border-radius at eight different places and then copy the values for further use.



Create and preview your own easing gradients in CSS. Note that the CSSWG syntax isn't supported in any browsers yet.


pick color

Get inspired by thousands of beautiful color schemes and make something cool!


Background linear gradient

CSS Gradient is a designstripe project that lets you create free gradient backgrounds for your website. Besides being a css gradient generator, the site is also chock-full of colorful content about gradients from technical articles to real life gradient examples like Stripe and Instagram.


Color gradient generator

Users can generate color gradients simply by selecting two or three colors and then choosing a gradient type. The website also provides some preset gradient styles that users can use directly.



The tool uses drag controls to visually adjust the visual effect of shadows. Users can control the number of layers of shadows, transparency, horizontal distance, vertical distance, and blur intensity.


box-shadow(Generate Soft-UI CSS code)



Users can choose a favorite animation effect, and then there is a visual parameter editor for tuning, and then they can use CSS directly without relying on third-party CSS libraries.



Ever needed to create awesome blob shapes for a design or background? Blobmaker is the perfect tool – a simple web app that lets you create, tweak and download organic SVG shapes in no time at all.


Share on Twitter