hello and welcome to red stapler channel in this video I'm going to show you 5
CSS tools to help with your web design and boost up your development
productivity let's check it out
the first one is gradpad a tools to help with creating a CSS gradient color
the tools is very simple it has two knobs that you can move freely to adjust
to create an angle and a slider bar below to change the gradient area color
and opacity
but if you are looking for an idea there's also a gallery for you to pick
once you have done with the customization just click get CSS for
this gradient and copy it over to your CSS
the second tools is Clippy if you are looking for our tools to create a clip
path to create a complex shape on your site this is the one for you Clippy has
a lot of shapes that you can pick from and allows you to customize each path
point location freely
you can also create your own shape by and each path
CSS will be provided automatically below for you to copy
next two is trianglify if you want to create a triangle mesh background like
this one this amazing tool can help you customize and generate your own in no
time at all just pick the size adjust the variance cell size and color and click
the download
you can choose between PNG or SVG file format and that's it
the next one is patternify a CSS pattern generator that let you create your own
pattern that can be embedded into your CSS without the need of the actual image
file you can pick the available preset pattern or draw a new one and see the
preview right away
the encoded base64 image code is generated automatically copy to your CSS
file on the right side the last one is keyframes.app if
you are looking for tools to help your CSS animation here's a good one
keyframes let you create an animation with our timeline bar that you can add a
keyframe or animation step that you want here's example if I want to create an
animated scaling and moving box
once you have done just click show output CSS
there are many transform attributes that you can try it out if you want to create
a moderately complex CSS animation just give key frames a try so that's all for
this video hope you guys enjoyed it like subscribe or furl us on Facebook if you
want to stay tuned with us thanks for watching and see you next video bye