Snippets Collections
# You can use imageMagick to create a gradient image on the fly, but with all the weird possibilities I didn't quite get the hang of it (yet). Anyway, a default 50:50 gradient can be created via "convert -size 100x100 gradient:black-white target.png". To shift the center, you can chain multiple gradients and use the ""-append" flag
❯ convert -size 1000x600 gradient:black-black -size 1000x400 gradient:black-none -append gradient.png

# To use the gradient as a mask on your image, they should be the same size. You can easily resize the image. But keep in mind that imageMagixk respects the proportions and resizes X and Y according to the smaller value
❯ convert gradient.png -resize 1200x800 gradient_resized.png

# Here is how to combine the two, so that you're left with a new image with the mask applied
❯ convert content.jpg gradient_resized.png -alpha on -compose CopyOpacity -composite result.png
 .conic-gradient {
  background: conic-gradient(from 90deg, #fff, #000);
}                               
                                
.gradient {
  background-image:
    radial-gradient(
      yellow,
      #f06d06
    );
}
.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      blue,
      yellow, 
      green
    );
}
star

Fri Apr 24 2020 11:55:55 GMT+0000 (UTC) https://css-tricks.com/snippets/css/css-conic-gradient/

#css #css #conic #gradient
star

Fri Jan 10 2020 19:00:00 GMT+0000 (UTC) https://css-tricks.com/snippets/css/css-radial-gradient/

#css #design #gradient #webdev

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension