CSS Gradation Generator
It is a generator for applying a gradation to the background.
It supports linear-gradient, radial-gradient (circular), conic-gradient (fan shape), etc. of basic (linear) gradation, and can generate gradation intuitively.
Since it also supports the specification of multiple gradations, it is also possible to generate a color that mixes multiple gradations by making the specified color of the above gradation transparent.
In the circular / fan-shaped gradation, in addition to preparing a tool for intuitively operating the center position, it is also equipped with a function that can intuitively operate the angle (deg) of the linear / fan-shaped gradation. I am.
It also supports repeated gradations.
You can also select and customize from over 70 types of samples!
Gradation Sample List. You can select and edit the base
Show a gradient sample containing the following colors
Two-color gradation
Gradation of 3 or more colors
Other
.original-gradient { height: 200px; width: 90%;}How to use the tool
・I don't know how to use the tool.
・I want to know various ways to use it
・I want to know the details of each item
For those who like, we have prepared a video that introduces the contents and features and explains how to use it.
Please take advantage of it.
Lots more videos on Website!
List of generators
CSS Gradation Generator
It is a generator for applying a gradation to the background.
It supports linear-gradient, radial-gradient (circular), conic-gradient (fan shape), etc. of basic (linear) gradation, and can generate gradation intuitively.
Since it also supports the specification of multiple gradations, it is also possible to generate a color that mixes multiple gradations by making the specified color of the above gradation transparent.
In the circular / fan-shaped gradation, in addition to preparing a tool for intuitively operating the center position, it is also equipped with a function that can intuitively operate the angle (deg) of the linear / fan-shaped gradation. I am.
It also supports repeated gradations.
You can also select and customize from over 70 types of samples!
CSS Button Generator
It is a high-performance automatic button generation tool that allows you to create buttons intuitively.
Background color, background gradation, button shadow (box-shadow), character shadow (text-shadow), size (width, height), border (border), rounded corners (border-radius), It corresponds to transition (animation) etc.
Since it also supports pseudo elements (before, after), mouse hover (hover), and pseudo elements after mouse hover, it is possible to generate buttons with various designs.
20 types of samples We have the above!
CSS Box Shadow Generator
A box-shadow tool that allows you to add shadows to images and elements.
You can choose from a wealth of samples and customize them.
It also supports the generation of inner shadows (inset) and multiple shadows. It also supports pseudo-elements such as before and after.
Pneumophysism samples are also available.
CSS Text Shadow Generator
It is an automatic text-shadow generation tool that can add various shadows to characters.
You can choose from a wealth of samples and customize them.
You can try various designs by supporting real-time text changes and multiple shadows.
CSS Border Generator
It is a CSS automatic generation tool for adding a border.
In addition to being able to specify up, down, left and right individually, you can also generate dotted lines, dashed lines, double lines, and three-dimensional lines (groove / ridge / isnet / outset). increase. You can also specify the preview size (width / height) and rounded corners (border-radius)
CSS Filter Generator
A css filter tool that makes it easy to implement effects on images and elements.
Blur, brightness, contrast, grayscale, hue-rotate, invert, saturation, sepia, shadow. You can specify multiple (drop-shadow) and so on.
For those who do not know how to use it, we have prepared a sample of css filter
Also, you can switch between multiple sample images and HTML elements as a preview, and upload your own image temporarily. You can also preview it!
CSS Triangle & Arrow Generator
It is a generator to create a triangle with only HTML and CSS.
Arrows are automatically generated by using CSS border. All directions of 360 degrees can be specified other than up, down, left and right
In addition to being equipped with a function for automatically calculating equilateral triangles, the colors can be changed freely.
Please use it for balloons and flowcharts.
CSS Backdrop-filter Generator
A back drop-filter tool that allows you to implement an effect behind a specified element.
Blur, brightness, contrast, grayscale, hue-rotate, invert, saturation, sepia, shadow. You can specify multiple (drop-shadow) and so on.
For those who do not know how to use it, we have prepared a sample of css filter
Also, you can switch between multiple sample images and HTML elements as a preview, and upload your own image temporarily. You can also preview it!
CSS Transform 2D/3D Generator
It is a tool for simulating the execution result of trasnsform with intuitive operation.
Translate (move), rotate, scale (enlargement / reduction), skew (distortion) can be intuitively operated in 2D / 3D direction. It also supports transform-origin (rotation axis), perspective (perspective / viewpoint), perspective-origin (vanishing point).
In addition, the target element and the original X, Y, Z axes can be visually displayed.
CSS Transition Generator
A transition generator for simple animations.
Supports easing, duration, delay, etc. You can select from the samples and edit them. You can finely set the style before and after the animation, so you can use it as a simulation of transition.
You can also change the reverse playback and playback speed of the animation. You can also stop in the middle or simulate the state of the element at any elapsed time.
CSS Animation & Keyframes Generator
A tool for CSS animations. Supports easing, duration, delay, etc.
List of other Tools
Description of each CSS property
- gradation
- There are three major gradient methods in CSS that can be used to express gradients.
You can specify the background basically anywhere you can specify a background.
Gradients are generated by the browser, so they look better when enlarged and can be resized on the fly. Specifically, there are three.- linear-gradient
It represents a gradient on a straight line. Primarily, multiple color transit points can be specified between 0% ~ 100%, and the angle of the gradient can also be specified.
The following can be specified: linear-gradient(gradient angle or direction, starting color, color on the Way (via), end color)
The angle or direction of the gradient is not required, but can be specified as an angle, such as 60deg (where deg stands for degree), or as text, such as to top, to right, to bottom, to left, etc. The default value is 180deg (the same as specifying to bottom).
The color on the Way (via)can be omitted. If intermediate colors are specified, the starting position of each color can also be specified by separating each color with a single space, if necessary.
Example description) background-image: linear-gradient(150deg, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 50%, rgba(35, 102, 247, 1) 90%); - radial-gradient
Like linear-gradient, multiple color transit points can be specified between 0% and 100%.
The following can be specified: radial-gradient(Ellipse or Circle position from start to end of gradient at center position, start color, color on the Way (via), end color);
You can also select acircle or ellipsewith the default value of ellipse.
The position from the start to the endof the gradation can be specified from four options: closest-side, farthest-side, closest-corner, and farthest-corner, with farthest-corner being the default value.
center position (initial position where the gradient starts) can be omitted if the initial value is the top, bottom, left or right center of the element (X: 50%, Y: 50%).
As with linear-gradient, the color on the Way (via) can be omitted, and if necessary, the starting position of each color can be specified by separating each color with a half-width space.
Example description) background-image: radial-gradient(circle farthest-side at 17% 89%, rgba(247, 166, 12, 1) 10%, rgba(255, 34, 87, 1) 50%, rgba(35, 102, 247, 1) 90%); - conic-gradient
It represents a gradient in the form of a fan. Primarily, you can specify multiple color transit points between 0 ~ 360deg (degree. angle), and you can also specify the starting angle of the gradient.
The following can be specified: conic-gradient(from gradient start angle at center position, start color, color on the Way (via), end color)
The starting angle of the gradientis optional and its default value is 0deg.
The center position, like radial-gradient, can be omitted with the initial values being the top, bottom, left, right, and center of the element (X: 50%, Y: 50%).
As with linear-gradient, the intermediate (via) color can be omitted, and if necessary, the starting position of each color can be specified by separating each color with a half-width space.
Example description) background-image: conic-gradient(from 15deg at 26% 30%, rgba(247, 166, 12, 1) 36deg, rgba(255, 34, 87, 1) 180deg, rgba(35, 102, 247, 1) 324deg);
Although it is often mistakenly specified in the background-color property, it is specified in the background-image property.
Example description) background-image: linear-gradient(red, blue);You can also specify a repeating gradient with the repeating-linear-gradient, repeating-radial-gradient, and repeating-conic-gradient properties.These gradients can be specified in multiple layers, separated by commas ",". The first gradient specified will be the top gradient (layer); be careful not to increase transparency by rgba or other means, otherwise the gradient below will not be visible.
The first one specified will be the highest and the last one will be the lowest.
Example description) background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
Excerpted fromMDN Web Docs - linear-gradient
- color
- When specifying colors on the Web, "HEX," "RGB," and "HSL" are often used.First of all, HEX, which you see most often (hexadecimal number), is a way of expressing colors in hexadecimal. It is expressed in the form of #1234ab.
The six digits after # are the values of red (1st~2nd digits), green (3rd~4th digits), and blue (5th~6th digits). Various colors are represented according to the color intensity of each value.
If each of the two digits is the same value, a three-digit expression can be used. For example, #aa9933 can be represented as #a93.
If you want to specify the transparency in hexadecimal, you can use an 8-digit number, with the 7th to 8th digits also in hexadecimal. 80% transparency can be specified with #aa9933CC, for example.RGB, like HEX, is capable of representing colors in red, green, and blue.
Each value can be specified in the range 0 ~ 255 and is represented as rgb(red value, green value, blue value).
Example description) rgb(10, 50, 220)
If you want to specify transparency, you can use rgba(red value, green value, blue value, transparency(alpha)).
The alpha value can be specified in the range 0~1, for example rgba(0, 0, 255, .5).HSL stands for Hue, Saturation, and Lightness.
When specifying colors in HSL, colors are specified using these three elements. Once the hue (type and shade of color) is determined, colors can be determined by adjusting saturation and lightness, which is more intuitive than RGB.
The following can be specified: hsl(hue, saturation, lightness)- Hue：Basically, you can specify a number between 0 and 360. If you specify a number beyond this range, it will be considered as a circumference, so for example, if you specify 380, it will be the same as 20.
- Lightness：You can specify a value between 0 and 100%; the closer to 100%, the brighter the image. Conversely, the closer the value is to 0%, the darker it becomes.
alpha values can be specified from 0 to 1, for example, hsla(80, 80%, 50%, .5).