CSS Generators — Smashing Magazine

Juggling between three languages on a daily basis, Iris is known for her love of linguistics, arts, web design and typography, as well as her goldmine of … More about Iris ↬
Weekly tips on front-end & UX.Trusted by 182,000+ folks.
Last week, we looked at CSS Auditing tools, and this week around we’ll be looking at useful generators for everything CSS: from gradients to drop-shadows and bezier curves to triangles and type scales. Just a few useful tools for your toolbelt, to keep close.
Meet Smashing Workshops on front-end, design & UX, with practical takeaways, live sessions, video recordings and a friendly Q&A. With Brad Frost, Stéph Walter and so many others.
We’re going to look at a bunch of different generators in this roundup, so it only seems appropriate to kick it off with this collection of 10 generators built by Temani Afif. Known for his penchant for flat markup and reusable styles, Temani has integrated his modern CSS techniques into this collection that includes generators for tooltips, ribbon shapes, waves, starbursts, gradients, and clipped corners, among several others. The fun thing about this collection is that Temani has shared the techniques he uses to generate the code in a number of articles he’s written here at Smashing Magazine!
Looking for a tool that’ll automatically generate CSS code for really smooth, layered box-shadows? Well, you’re going to love SmoothShadow. Inspired by an article written by Tobias Ahlin Bjerrome, this nifty tool was created to help anyone generate the code they need on the spot.
Once you’ve given it a try, it will be difficult to not use it. The little tool allows you to visually design a layered smooth box-shadow, but also tweak alpha, offset and blur with individual easing curves. And it gets even better: The creator of the tool, Philipp Brumm, has also released SmoothShadow as a Figma plugin, so you can optimize your workflow just like you’ve always wanted to.
When we think about border-radius, we usually think about a few straightforward values — perhaps 8px or 11px, or maybe 16px. However, border-radius can be quite fancy, and fancy-border-radius generator allows you to generate them easily. The tool provides a visualization of not only plain round shapes, but also organic shapes, by using eight values combined. Essentially, what we are creating are overlapping ellipses that build the final shape. The tool is also available as CLI tool, so you can run it locally as well.
Sometimes an animation just doesn’t feel right, does it? Perhaps the duration is off, or the easing is quirky, and figuring it out might take quite some time. With Lea Verou’s cubic-bezier, you can preview and compare animations, slow them down and even adjust them visually. And then copy-paste the CSS snippet to plug into your project right away.
And if you need basic or complex CSS @keyframe animations, Keyframes.app provides a visual timeline editor similar to video-editing software. You can add steps, change sizing and position, apply transforms and color changes and get the CSS to copy-paste as well. Ah and not to forget the Animation panel in Chrome and Firefox for debugging as well.
With gradients, we often rely on linear gradients, transitioning from one color to another. However, linear gradients have hard edges where they start or end. There is a way to make the gradients slightly better, with easing functions. So Andreas Larsen has built a little editor, Easing Gradients Editor, that allows us to create and preview easing gradients in CSS. The tool is also available as a Sketch plugin and a PostCSS plugin. You can use a color picker, but unfortunately can’t add an actual HEX color value yet.
Sometimes you need very specific type of color for a very specific task. For example, if you are working on a data visualization project — e.g. pie charts, grouped bar charts, maps — you probably need a series of colors that are visually equidistant. That’s when LearnUI Data Color Picker can become very useful. In such cases, it’s better to use a range of hues, so users can identify the differences faster. It’s indeed easier to distinguish yellow from orange than blue from blue-but-15%-lighter.
With the tool, you choose how many colors you need and whether you need a light or a dark background color, and choose whether you want a default palette, a single hue palette, or a divergent color scale. Once you have it, you can copy hex values and export them as SVG to use in Sketch, Figma or Adobe XD.
LearnUI also provides an accessible color generator and a quite fancy gradient generator, with different gradient types, interpolation, angle, easing and how smooth you’d like the gradient to be.
Imagine that you just need to find CSS triangle styles for elements and pseudo-elements. Or perhaps refine the color palette a bit by exploring tints and shades of a given color. Or perhaps generate a linear and radial CSS gradient for a section of the page. There is no need to do it all manually or try to find those CSS snippets all over the web. You can always find them on Omatsuri.
Omatsuri means festival in Japanese, and the site is a lovely little festival of open-source browser tools for everyday use. On the site, you’ll find a triangle generator, a color shades generator, a gradient generator, page dividers, SVG compressor, SVG → JSX converter, a fake data generator, CSS cursors, and keyboard event codes. Designed and built by Vitaly Rtishchev and Vlad Shilov. The source code of the site is available as well.
If you want to make text better stand out against a background image, there’s a little trick: You can use a CSS linear-gradient overlay with a certain opacity on top of the image to improve color contrast. Spotify, for example, uses the technique.
While all of this only requires one line of code, there’s still one question left to be answered: How to determine the opacity to use for the overlay? The Optimal Overlay Finder helps you find out. You upload an image, enter your t