How to create new image just with gradient colors, using "from-color" and "to-color"?
-
Why create an image when you could just make a gradient?– CodaFiMay 28, 2013 at 9:30
-
1You can create a UIView, add a CAGradientLayer with the colors you want to it, and then render the view to a UIImage. If there is something of this you want me to deploy to a larger explanation, tell me and I will post an answer with the code. Good luck!– Ricard Pérez del CampoMay 28, 2013 at 9:35
-
I suspect you know answer. Would you like say us?– stoshaMay 28, 2013 at 9:52
9 Answers
A simpler answer, using a CAGradientLayer.
CGSize size = CGSizeMake(width, height);
CAGradientLayer *layer = [CAGradientLayer layer];
layer.frame = CGRectMake(0, 0, size.width, size.height);
layer.colors = @[(__bridge id)[UIColor blackColor].CGColor, // start color
(__bridge id)[UIColor whiteColor].CGColor]; // end color
UIGraphicsBeginImageContext(size);
@try {
[layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
} @finally {
UIGraphicsEndImageContext();
}
First you need to create a graphics context in the required size:
CGSize size = CGSizeMake(width, height);
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
CGContextRef context = UIGraphicsGetCurrentContext();
Create a colour space:
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
Now create the gradient:
size_t gradientNumberOfLocations = 2;
CGFloat gradientLocations[2] = { 0.0, 1.0 };
CGFloat gradientComponents[8] = { r0, g0, b0, a0, // Start color
r1, g1, b1, a1, }; // End color
CGGradientRef gradient = CGGradientCreateWithColorComponents (colorspace, gradientComponents, gradientLocations, gradientNumberOfLocations);
Fill the context with the gradient - this assumes a vertical gradient:
CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 0), CGPointMake(0, size.height), 0);
Now you can create an image from the context:
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
Finally release the gradient, colour space and context:
CGGradientRelease(gradient);
CGColorSpaceRelease(colorspace);
UIGraphicsEndImageContext();
-
1if a0 + a1 = 2 (no transparency in either color) then you can probably make the image opaque. May 28, 2013 at 10:32
-
Thanks, excellent answer :) Just changed second point y value from 0 to size.height. May 28, 2013 at 14:13
I think, It's more swifty
Swift 3
struct GradientPoint {
var location: CGFloat
var color: UIColor
}
extension UIImage {
convenience init?(size: CGSize, gradientPoints: [GradientPoint]) {
UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
guard let context = UIGraphicsGetCurrentContext() else { return nil } // If the size is zero, the context will be nil.
guard let gradient = CGGradient(colorSpace: CGColorSpaceCreateDeviceRGB(), colorComponents: gradientPoints.flatMap { $0.color.cgColor.components }.flatMap { $0 }, locations: gradientPoints.map { $0.location }, count: gradientPoints.count) else {
return nil
}
context.drawLinearGradient(gradient, start: CGPoint.zero, end: CGPoint(x: 0, y: size.height), options: CGGradientDrawingOptions())
guard let image = UIGraphicsGetImageFromCurrentImageContext()?.cgImage else { return nil }
self.init(cgImage: image)
defer { UIGraphicsEndImageContext() }
}
}
extension UIImageView {
func gradated(gradientPoints: [GradientPoint]) {
let gradientMaskLayer = CAGradientLayer()
gradientMaskLayer.frame = frame
gradientMaskLayer.colors = gradientPoints.map { $0.color.cgColor }
gradientMaskLayer.locations = gradientPoints.map { $0.location as NSNumber }
self.layer.insertSublayer(gradientMaskLayer, at: 0)
}
}
Use like this,
let points = [GradientPoint(location: 0, color: #colorLiteral(red: 0.7450980544, green: 0.1568627506, blue: 0.07450980693, alpha: 0.2530534771)), GradientPoint(location: 0.2, color: #colorLiteral(red: 0.9686274529, green: 0.78039217, blue: 0.3450980484, alpha: 0.5028884243)), GradientPoint(location: 0.4, color: #colorLiteral(red: 0.721568644, green: 0.8862745166, blue: 0.5921568871, alpha: 0.3388534331)),
GradientPoint(location: 0.6, color: #colorLiteral(red: 0.2588235438, green: 0.7568627596, blue: 0.9686274529, alpha: 0.3458681778)), GradientPoint(location: 0.8, color: #colorLiteral(red: 0.2196078449, green: 0.007843137719, blue: 0.8549019694, alpha: 0.3851232394))]
UIImage(size: CGSize(width: 300, height: 300), gradientPoints: points)
let veniceImageView = UIImageView(image: #imageLiteral(resourceName: "venice-italy.jpg"))
veniceImageView.gradated(gradientPoints: points)
I tested on swift 3. Check the screenshot.
UPDATED TO Swift 3
I wrote UIImage
extension for Swift but you can also use it from Objective-C:
import UIKit
private let ChannelDivider: CGFloat = 255
public class RGBA: NSObject {
var red: CGFloat
var green: CGFloat
var blue: CGFloat
var alpha: CGFloat
init(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {
self.red = red
self.green = green
self.blue = blue
self.alpha = alpha
}
init(intRed: Int, green: Int, blue: Int, alpha: Int) {
self.red = CGFloat(intRed)/ChannelDivider
self.green = CGFloat(green)/ChannelDivider
self.blue = CGFloat(blue)/ChannelDivider
self.alpha = CGFloat(alpha)/ChannelDivider
}
}
public class Grayscale: NSObject {
var white: CGFloat
var alpha: CGFloat
init(white: CGFloat, alpha: CGFloat) {
self.white = white
self.alpha = alpha
}
}
public class GradientPoint<C>: NSObject {
var location: CGFloat
var color: C
init(location: CGFloat, color: C) {
self.location = location
self.color = color
}
}
extension UIImage {
public class func image(withGradientPoints gradientPoints: [GradientPoint<[CGFloat]>], colorSpace: CGColorSpace, size: CGSize) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, 0);
guard
let context = UIGraphicsGetCurrentContext(),
let gradient = CGGradient(colorSpace: colorSpace,
colorComponents: gradientPoints.flatMap { $0.color },
locations: gradientPoints.map { $0.location }, count: gradientPoints.count) else {
return nil
}
context.drawLinearGradient(gradient, start: CGPoint.zero, end: CGPoint(x: 0, y: size.height), options: CGGradientDrawingOptions())
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
public class func image(withRGBAGradientPoints gradientPoints: [GradientPoint<RGBA>], size: CGSize) -> UIImage? {
return image(withGradientPoints: gradientPoints.map {
GradientPoint(location: $0.location, color: [$0.color.red, $0.color.green, $0.color.blue, $0.color.alpha])
}, colorSpace: CGColorSpaceCreateDeviceRGB(), size: size)
}
public class func image(withRGBAGradientColors gradientColors: [CGFloat: RGBA], size: CGSize) -> UIImage? {
return image(withRGBAGradientPoints: gradientColors.map { GradientPoint(location: $0, color: $1)}, size: size)
}
public class func image(withGrayscaleGradientPoints gradientPoints: [GradientPoint<Grayscale>], size: CGSize) -> UIImage? {
return image(withGradientPoints: gradientPoints.map {
GradientPoint(location: $0.location, color: [$0.color.white, $0.color.alpha]) },
colorSpace: CGColorSpaceCreateDeviceGray(), size: size)
}
public class func image(withGrayscaleGradientColors gradientColors: [CGFloat: Grayscale], size: CGSize) -> UIImage? {
return image(withGrayscaleGradientPoints: gradientColors.map { GradientPoint(location: $0, color: $1) }, size: size)
}
}
You can create gradient image using RGBA colors:
// Objective-C
RGBA *startColor = [[RGBA alloc] initWithRed:1 green:0 blue:0 alpha:1];
RGBA *endColor = [[RGBA alloc] initWithIntRed:0 green:255 blue:0 alpha:255];
UIImage *gradientImage = [UIImage imageWithRGBAGradient: @{ @0: startColor, @1: endColor} size: CGSizeMake(32, 64)];
// Swift
let startColor = RGBA(red: 1, green: 0, blue: 0, alpha: 1)
let endColor = RGBA(intRed: 0, green: 255, blue: 0, alpha: 255)
let gradientImage = UIImage.image(withRGBAGradientPoints: [0: startColor, 1: endColor], size: CGSizeMake(32, 64))
And grayscale colors:
// Objective-C
Grayscale *startColor = [[Grayscale alloc] initWithWhite:1 alpha:1];
Grayscale *endColor = [[Grayscale alloc] initWithWhite:0 alpha: 0.5];
UIImage *gradientImage = [UIImage imageWithGrayscaleGradient: @{ @0: startColor, @1: endColor} size: CGSizeMake(32, 64)];
// Swift
let startColor = Grayscale(white: 1, alpha: 1)
let endColor = Grayscale(white:0, alpha: 0.5)
let gradientImage = UIImage.image(withGrayscaleGradientPoints: [0: startColor, 1: endColor], size: CGSizeMake(32, 64))
If you are not going to use this code from Objective-C than you can remove NSObject
inheritance from RGBA
, Grayscale
and GradientPoint
.
-
Had to convert this to Swift 3 to work on my project. I've added an answer below, as it's too big to put in this comment. Nov 14, 2016 at 11:00
Swift 3 version of Mixel's answer
import UIKit
private let ChannelDivider: CGFloat = 255
public class RGBA: NSObject {
var red: CGFloat
var green: CGFloat
var blue: CGFloat
var alpha: CGFloat
init(red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {
self.red = red
self.green = green
self.blue = blue
self.alpha = alpha
}
init(intRed: Int, green: Int, blue: Int, alpha: Int) {
self.red = CGFloat(intRed)/ChannelDivider
self.green = CGFloat(green)/ChannelDivider
self.blue = CGFloat(blue)/ChannelDivider
self.alpha = CGFloat(alpha)/ChannelDivider
}
}
public class Grayscale: NSObject {
var white: CGFloat
var alpha: CGFloat
init(white: CGFloat, alpha: CGFloat) {
self.white = white
self.alpha = alpha
}
}
public class GradientPoint<C>: NSObject {
var location: CGFloat
var color: C
init(location: CGFloat, color: C) {
self.location = location
self.color = color
}
}
extension UIImage {
public class func image(withGradientPoints gradientPoints: [GradientPoint<[CGFloat]>], colorSpace: CGColorSpace, size: CGSize) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, 0);
guard
let context = UIGraphicsGetCurrentContext(),
let gradient = CGGradient(colorSpace: colorSpace,
colorComponents: gradientPoints.flatMap { $0.color },
locations: gradientPoints.map { $0.location }, count: gradientPoints.count) else {
return nil
}
context.drawLinearGradient(gradient, start: CGPoint.zero, end: CGPoint(x: 0, y: size.height), options: CGGradientDrawingOptions())
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
public class func image(withRGBAGradientPoints gradientPoints: [GradientPoint<RGBA>], size: CGSize) -> UIImage? {
return image(withGradientPoints: gradientPoints.map {
GradientPoint(location: $0.location, color: [$0.color.red, $0.color.green, $0.color.blue, $0.color.alpha])
}, colorSpace: CGColorSpaceCreateDeviceRGB(), size: size)
}
public class func image(withRGBAGradientColors gradientColors: [CGFloat: RGBA], size: CGSize) -> UIImage? {
return image(withRGBAGradientPoints: gradientColors.map { GradientPoint(location: $0, color: $1)}, size: size)
}
public class func image(withGrayscaleGradientPoints gradientPoints: [GradientPoint<Grayscale>], size: CGSize) -> UIImage? {
return image(withGradientPoints: gradientPoints.map {
GradientPoint(location: $0.location, color: [$0.color.white, $0.color.alpha]) },
colorSpace: CGColorSpaceCreateDeviceGray(), size: size)
}
public class func image(withGrayscaleGradientColors gradientColors: [CGFloat: Grayscale], size: CGSize) -> UIImage? {
return image(withGrayscaleGradientPoints: gradientColors.map { GradientPoint(location: $0, color: $1) }, size: size)
}
}
Do you need some to add some TRANSPARENCY to the gradient?
Set the alpha value in the color's declaration as follows:
UIView *countDownView =[[UIView alloc]initWithFrame:CGRectMake((self.view.frame.size.width/2)-100, self.view.frame.size.height/2- 100, 200,200)];
countDownView.layer.cornerRadius = 20.0;
UIColor *colorFrom = [UIColor colorWithRed: 130/255. green:59/255. blue:216/255. alpha:1.0];
UIColor *colorTo = [UIColor colorWithRed: 55/255. green:21/255. blue:250/255. alpha:0.5];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = countDownView.bounds;
gradient.colors = [NSArray arrayWithObjects:(id)[colorFrom CGColor], (id)[colorTo CGColor], nil];
gradient.cornerRadius = 20.0; //set the same cornerRadius than the UIView if needed
[countDownView.layer insertSublayer:gradient atIndex:0];
Need to remove it?
[gradient removeFromSuperlayer];//not tested
[works on xCode 7.2.1 for iOS 9]
Here's how I implemented Simon's suggestion (elsewhere in this thread) to create a reusable "hot" and "cold" UIImage
like below:
Objective-C code:
-(UIImage*)createHotOrColdImage:(BOOL)bHot
{
// Create a UIImage with either a "Hot" or "Cold" gradient background
//
const int WIDTH = 75;
const int HEIGHT = 44;
// Do we want our UIImage to fade from black-to-red or black-to-blue ?
UIColor* color = (bHot) ? [UIColor redColor] : [UIColor colorWithRed:0.3 green:0.3 blue:1.0 alpha:1.0];
CGSize size = CGSizeMake(WIDTH, HEIGHT);
UIGraphicsBeginImageContextWithOptions(size, NO, 0);
const CGFloat *components = CGColorGetComponents(color.CGColor);
CGFloat red = components[0];
CGFloat green = components[1];
CGFloat blue = components[2];
size_t gradientNumberOfLocations = 4;
CGFloat gradientLocations[4] = { 0.0, 0.3, 0.7, 1.0 };
CGFloat gradientComponents[16] = { red, green, blue, 0,
red, green, blue, 1,
red, green, blue, 1,
red, green, blue, 0 };
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents (colorspace, gradientComponents, gradientLocations, gradientNumberOfLocations);
// Create a UIImage containing this gradient
CGContextRef context = UIGraphicsGetCurrentContext();
// Make sure the gradient is vertical
CGContextDrawLinearGradient(context, gradient, CGPointMake(0, 0), CGPointMake(0, HEIGHT), 0);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
CGGradientRelease(gradient);
CGColorSpaceRelease(colorspace);
UIGraphicsEndImageContext();
return image;
}
To use:
UIImage* hotImage = [self createHotOrColdImage:TRUE];
UIImage* coldImage = [self createHotOrColdImage:FALSE];
Xamarin solution:
private UIImage GenerateBackgroundGradient(CGSize size, CGColor[] colors)
{
UIImage backgroundGradient = null;
var layer = new CAGradientLayer
{
Frame = View.Frame,
Colors = colors
};
UIGraphics.BeginImageContext(size);
layer.RenderInContext(UIGraphics.GetCurrentContext());
backgroundGradient = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return backgroundGradient;
}
You can use https://github.com/leszek-s/LSCategories It allows creating image with gradient like this:
UIImage *gradient = [UIImage lsGradientImageWithSize:CGSizeMake(100, 100) startColor:[UIColor redColor] endColor:[UIColor greenColor] startPoint:CGPointMake(0.0, 0.0) endPoint:CGPointMake(0.0, 1.0)];