Skip to content

Repository files navigation

Gradient Generator

This app allows users to create custom gradient backgrounds and copy the CSS to recreate the background they designed.

Features

  • Supports different Types of gradient (linear, radial & conic)
  • Supports as many colours the user can handle (all rendering is client side so could cause problems if they push to extreme)
  • Allows for manual positioning of Colours through sliders
  • Positioning stays relative on adding more colours
  • Positioning is the same on removing colours
  • Allows users to copy Css to clipboard froma single click
  • users can choose circle or ellipse for radial gradient
  • angle of linear gradient is changeable
  • center of radial gradient is changable
  • menu can be minimised to allow for better view of gradient

Known bugs

  • On mobile the minimised menu can hide bellow the native navigation

Setup your own site

These instructions are for a vercel setup

  • Fork this repository
  • Signin to vercel and Add new project
  • link your github if not already and select the forked repository
  • Deploy
  • have fun

Dev Reflection

This project was fun and caused me to learn a lot of new to me CSS and refreshed my knowledge on inline styles in react and next I could've added more features if I had been more methodical with research and planning as I had started with a scope to broad causing set backs due to lack of understanding I hope people can enjoy this project

About

A Gradient Generator that users can input different colours and other options to return a copyable string of CSS to duplicate the results

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages