gggrain

What it does

An easy way to generate SVG gradient backgrounds that have coarse grain and give you designs more texture and dimension.

Generate beautiful grainy gradients and export them as SVG files to add a different kind of gradient to your designs.

🌈 This SVG generator makes it easy to add an analog/organic touch to your gradients by introducing some coarse grain. It makes for a great way to add texture and dimension to your designs. 🙌 The idea for this gradient generator was inspired by this great CSS-Tricks article from Jimmy Chion . This gradient generator makes use of SVG filters like feTurbulence for generating noise and feComponentTransfer as well as feColorMatrix to tweak the noise so that it looks nice and grainy. If you're interested in geeking out a bit more on the topic, I recommend this CSS-Tricks article . The resulting SVG files are lightweight in size, but they can require a lot from the CPU to render because of the…from fffuel.co

• 
  SVG Background Generator2018 · svgbackgrounds.com · ▲296

  Customize, scalable backgrounds and patterns for free

• 
  SVG Mesh Gradient Generator2022 · magicpattern.design · ▲257

  Create unique customizable SVG gradients with MagicPattern

• 
  CSS Gradient Generator2024 · cssgradientgenerator.com · ▲237

  Generate and make beautiful colors

• 
  ffflux2021 · fffuel.co · ▲118

  SVG generator for fluid gradient backgrounds

• 
  CSS Gradient2018 · cssgradient.io · ▲410

  A simple, colorful gradient generator

• 
  CSS Color Gradient Generator2020 · mybrandnewlogo.com · ▲208

  A novel and easy way to design beautiful color gradients.

• 
  Lofi Cities – Pixel-art city nights with browser-generated lofi▲319

  Endless lofi beats composed live in your browser, over pixel-art nights in Paris, Tokyo, New York, Hong Kong, Sydney, San Francisco and more. Free, no sign-up.

  Work · 24d ago · loficities.com

• 
  Smooth Recorder▲257

  Mac screen recordings that look edited when you hit stop

  Work · 18d ago · smoothrecorder.com

• 
  Figma Specs▲222

  A container for your context that lives on the Figma canvas

  Work · 3d ago · figma.com

• 
  The rarest tech books and docs you've probably never read▲190

  Work · 12d ago · readrare.com

• LA
  Looptap – A minimal game to waste your time▲1,241

  Life & fun · 2022 · looptap.vasanthv.com

• 
  Fig▲956

  Autocomplete for the Terminal

  Dev tools · 2022 · fig.io

• 
  Copywriting Examples▲871

  The world's best copy. In one place.

  Growth · 2022 · marketingexamples.com

• 
  Web page that parses and explains the label on a bike tire▲631

  History: Last year I had to replace the tire on my bike, and I was surprised how difficult it was to find a suitable new tire. There were a lot of numbers written on the casing, so I googled what they meant. In the end I was successful, but I didn't want to do the same work again for the next bike after I've forgotten the details. So I wrote this website. Technically, the web page is kept very simple, no frameworks, no templates, no website builder. It uses HTML5, CSS and JavaScript, and it privides a responsive layout for mobile usage. I'm happy to receive feedback. If you have tried the…

  Life & fun · 2022 · fahrrad-tools.de

• 
  Startup Recipes▲626

  The ultimate MVP cheat sheet with 60+ startup formulas

  Dev tools · 2022 · mvprecipes.com

• 
  hagrid▲595

  No-code user-generated FAQ, for any webpage

  Dev tools · 2022 · magicstudio.com