HTML Gradient Tool

Add gradients to your designs to create color shifts and layered effects.

Start with presets or gradients you see on a website.

The 1der1 website editor understands HTML and styles. Then, you can use tools to design your creations.

Watch the video to see the gradient tool in action:

  • Copy a website.
  • Paste into a 1der1 editor.
  • Click on an element to edit.
  • The element has 19 backgrounds.
  • Open the Gradient tool.
  • Play with some settings.
  • Add credits for the source.
  • Open Josh Comeau's Gradient Generator.
  • It creates better gradients by inserting intermediate colors.
  • Copy the generated CSS.
  • Paste it into the gradient field.
  • The tooltip shows ten colors.
  • Open the Gradient tool.
  • Edit the gradient angle.
  • Remove all intermediate colors.
  • The gradient shows a "Gray Dead Zone."
  • Select a color space.
  • You can have a beautiful gradient.
  • Without providing intermediate colors.
  • Choose a sample gradient.
  • Edit the color opacities.
  • Change the background color.
  • Preview while on the menu.
  • Drag the Background gradient.
  • Drop into the Border gradient.
  • Remove the Background gradient.
  • Change the border width.

Enjoy learning by doing with 1der1 :-)

Disqus - Express Yourself