Css background animation generator

CSS Animated Gradient Background Generator

This animated gradient background generator helps you to easily generate CSS code for the gradient background. It comes with various built-in color presets and animations. Besides this, you can also add custom colors through a color picker or color entering the color value. Similarly, you can select background movement direction and animation duration.

If you want to generate CSS code for an animated gradient background, you can use the tool online by visiting the demo page. On the other hand, you can also integrate it into your web/app project to allow users to generate animated gradient background.

This gradient generator tool is based on React JS which generates pure copy-and-pasteable CSS for linearly animated gradients in HTML. The UI components of this tool are powered with ReactJS DOM without any other dependency.

How to Create CSS Animated Gradient Background Generator

First of all, load the Normalize CSS by adding the following CDN link into the head tag of your webpage. It will reset the browser’s default styles and standardize the CSS that we will use for our gradient generator app.

We need a container element in which ReactJS renders the gradient background generator app. So, create a div element with an id “root” as follows:

Now, load the React JS JavaScript library by adding the following CDN links just after the above HTML structure. You can also load these files into the head tag of the HTML document, but it’s best practice to include the JS file at the end of the body element for better performance.

The following is the complete JavaScript code for the gradient background generator app. It renders the HTML, UI components, and all necessary functionalities for the app. You need to place it after the above CDN link between the tag. You can also create a separate .js file for this code and include it in your project.

function _extends() >>return target;>;return _extends.apply(this, arguments);>const < useState, useEffect >= React; const rootElement = document.getElementById('root'); const presets = [ ["#bd4faf", "#5794db"], ["#0080ff", "#388363", "#fcf8d6"], ["#246655", "#462466", "#b66d52"], ["#41b497", "#7f47c5", "#c29c46"], ["#71c66c", "#ff8000", "#db5779"], ["#cf5c5c", "#c19b4a", "#def2a0", "#c6ee4a", "#42eca6", "#64b3d9", "#208ea2", "#498ada", "#5b73df", "#897ed3"], ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#0000ff", "#ff00ff"]]; const currentSet = ["#71c66c", "#ff8000", "#db5779"]; const isHidden = false; function PresetsSection(< parentFunction >) < const [items, setItems] = React.useState(presets); return /*#__PURE__*/( React.createElement("section", null, /*#__PURE__*/ React.createElement("span", < className: "label" >, "Presets"), /*#__PURE__*/ React.createElement("div", < className: "presets" >, items.map((item) => /*#__PURE__*/ React.createElement(Preset, < key: item, colorSeries: item.toString(), changePreset: () =>parentFunction(item) >))))); > function Preset(< colorSeries, changePreset >) < return /*#__PURE__*/( React.createElement("div", < className: "preset", style: < backgroundImage: `linear-gradient(90deg, $)` >, onClick: () => changePreset() >)); > function ColorList(< colorSet, removeFunction, changeFunction >) < return /*#__PURE__*/( React.createElement("ol", < className: "color-list" >, colorSet.map((color, index) => /*#__PURE__*/ React.createElement(ColorItem, < key: index, colorValue: color, removeColor: () =>removeFunction(index), changeColor: () => changeFunction(event, index) >)))); > function ColorItem(< colorValue, removeColor, changeColor >) < const idAttribute = Math.random().toString(36).substr(2, 5); return /*#__PURE__*/( React.createElement("li", < className: "color" >, /*#__PURE__*/ React.createElement("label", < htmlFor: idAttribute, className: "color__label" >, colorValue), /*#__PURE__*/ React.createElement("input", < type: "color", id: idAttribute, className: "color__input", value: colorValue, onChange: event =>changeColor(event) >), /*#__PURE__*/ React.createElement("button", < type: "button", className: "color__remove", "aria-label": "Remove Color", onClick: () =>removeColor() >, "\u2716"))); > function CopyToClipboardButton() < const copy = () =>< const code = document.getElementById('output'); code.select(); code.setSelectionRange(0, 99999); document.execCommand("copy"); code.setSelectionRange(0, 0); >; return /*#__PURE__*/( React.createElement("button", < type: "button", className: "button button--copy", onClick: copy >, "Copy to Clipboard")); > function Output(< bg, bgwidth, bgheight, degrees, direction, duration >) < let code = getCssCodeForOutput(< bg, bgwidth, bgheight, degrees, direction, duration >); return /*#__PURE__*/( React.createElement("section", null, /*#__PURE__*/ React.createElement("div", < style: < display: `flex`, justifyContent: `space-between`, alignItems: `flex-end`, margin: `10px 0` >>, /*#__PURE__*/ React.createElement("label", < htmlFor: "output" >, /*#__PURE__*/React.createElement("strong", null, "CSS Output")), /*#__PURE__*/ React.createElement(CopyToClipboardButton, null)), /*#__PURE__*/ React.createElement("textarea", < value: code, readOnly: true, className: "output", id: "output" >))); > function getCssKeyframes(direction) < switch (direction) < case 'left': return `@keyframes animateBg < 0% < background-position: 0% 0%; >100% < background-position: 100% 0%; >>`; case 'right': return `@keyframes animateBg < 0% < background-position: 100% 0%; >100% < background-position: 0% 0%; >>`; case 'up': return `@keyframes animateBg < 0% < background-position: 0% 0%; >100% < background-position: 0% 100%; >>`; case 'down': return `@keyframes animateBg < 0% < background-position: 0% 100%; >100% < background-position: 0% 0%; >>`;> > function getCssCodeForOutput(< bg, bgwidth, bgheight, degrees, direction, duration >) < const keyframes = getCssKeyframes(direction); return `.animated-gradient < animation: animateBg $s linear infinite; background-image: linear-gradient($deg,$); background-size: $% $%; > $ `; > function useFormInput(initialValue) < const [value, setValue] = useState(initialValue); function handleChange(e) < setValue(e.target.value); >return < value, onChange: handleChange >; > function Generator(< title >) < const [colorSet, setColorSet] = React.useState(currentSet); const [visibility, setVisibility] = React.useState(isHidden); const addColor = () => < let newColor = '#' + Math.floor(Math.random() * 16777215).toString(16).padStart(6, '0'); setColorSet(colorSet =>[. colorSet, newColor]); >; const removeColor = index => < const temp = [. colorSet]; temp.splice(index, 1); setColorSet(temp); >; const changeColor = (event, index) => < const temp = [. colorSet]; temp[index] = event.target.value; setColorSet(temp); >; const toggleVisibility = visibility => < setVisibility(!visibility); >; const duration = useFormInput(14); const bg = `$,$,$`; const direction = useFormInput('left'); const bgwidth = direction.value === 'left' || direction.value === 'right' ? 100 * (colorSet.length + 1) : 100; const bgheight = direction.value === 'left' || direction.value === 'right' ? 100 : 100 * (colorSet.length + 1); const degrees = direction.value === 'left' || direction.value === 'right' ? '90' : '0'; return /*#__PURE__*/( React.createElement("div", < className: "generator", role: "main", style: < backgroundImage: `linear-gradient($deg, $)`, backgroundSize: `$% $%`, animationDuration: `$s`, animationName: `animateBg-$` > >, /*#__PURE__*/ React.createElement("button", < className: !visibility ? 'button' : 'button button--faded', onClick: () => >, !visibility ? `Hide` : `Unhide`), !visibility ? /*#__PURE__*/ React.createElement("article", < className: "container" >, /*#__PURE__*/ React.createElement("h1", < className: "title" >, "Pure CSS Animated Gradient Generator"), /*#__PURE__*/ React.createElement(PresetsSection, < parentFunction: item => >), /*#__PURE__*/ React.createElement("button", < type: "button", className: "button button--add", onClick: addColor >, "Add Color"), /*#__PURE__*/ React.createElement(ColorList, < colorSet: colorSet, removeFunction: index =>removeColor(index), changeFunction: (event, index) => changeColor(event, index) >), /*#__PURE__*/ React.createElement("section", null, /*#__PURE__*/ React.createElement("label", < htmlFor: "duration" >, /*#__PURE__*/ React.createElement("span", null, /*#__PURE__*/React.createElement("strong", null, "Duration"), " (seconds)"), /*#__PURE__*/ React.createElement("input", _extends(< id: "duration", className: "input--textlike duration", type: "number", min: "1", max: "1000" >, duration)))), /*#__PURE__*/ React.createElement("section", null, /*#__PURE__*/ React.createElement("label", < htmlFor: "direction" >, /*#__PURE__*/ React.createElement("strong", null, "Direction"), /*#__PURE__*/ React.createElement("select", _extends(< id: "direction", className: "input--textlike direction" >, direction), /*#__PURE__*/ React.createElement("option", < value: "left" >, "\u2190 Left"), /*#__PURE__*/ React.createElement("option", < value: "right" >, "\u2192 Right"), /*#__PURE__*/ React.createElement("option", < value: "up" >, "\u2191 Up"), /*#__PURE__*/ React.createElement("option", < value: "down" >, "\u2193 Down")))), /*#__PURE__*/ React.createElement(Output, < bg: bg, bgwidth: bgwidth, bgheight: bgheight, direction: direction.value, degrees: degrees, duration: duration.value >), /*#__PURE__*/ React.createElement("footer", null, /*#__PURE__*/ React.createElement("p", null, /*#__PURE__*/ React.createElement("small", null, "Created by ", /*#__PURE__*/React.createElement("a", < href: "https://granteben.com" >, "Grant Eben"), "."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/ React.createElement("small", null, "Open Source on ", /*#__PURE__*/React.createElement("a", < href: "https://github.com/gmeben/pure-css-animated-gradient-generator" >, "GitHub"), " and ", /*#__PURE__*/React.createElement("a", < href: "https://gitlab.com/gmeben/pure-css-animated-gradient-generator" >, "GitLab"))))) : null)); > const app = /*#__PURE__*/React.createElement(Generator, null); ReactDOM.render(app, rootElement);

The Style Customization

If you want to customize the interface of the gradient background generator app, you can override the CSS rules according to your needs. The following are the default styles for the container and «generator» app wrapper.

The «button» class is used for the buttons of the gradient generator app. You can set the custom values for the following styles if you want to have a different look for the buttons. Similarly, you can check this tutorial to apply hover effects on buttons.

.button < background-color: var(--button-color-bg); border-radius: 4px; border: 1px solid var(--button-color-border); cursor: pointer; height: 36px; padding-left: 40px; padding-right: 40px; transition: background-color 120ms ease, opacity 1s ease; >.button:hover < background: #c8e6c8; >.button:active < box-shadow: 0 2px 6px #555 inset; background-color: #999; >.button—add < margin-left: 18px; width: 194px; >.button—faded < opacity: 0.05; >.button—faded:hover

The «presets» class is the wrapper element for the color presets. The following are the default CSS styles for this class.

.presets < margin: 10px 0; >.preset < background: gray; border-radius: 2px; border: 1px solid var(--button-color-border); cursor: pointer; display: inline-block; height: 36px; margin-right: 10px; width: 36px; >.input—textlike

If you want to customize the colors input fields, you can use the following mentioned classes to style the color add, remove, and color label elements.

.color-list < padding: 0 0 0 18px; >.color < margin-bottom: 10px; position: relative; >.color__input, .color__remove < box-sizing: border-box; cursor: pointer; vertical-align: middle; >.color__label < background-color: #fafafa; border-left: 1px solid #888; cursor: pointer; font-family: Courier New, monospace; padding: 7px 8px; position: absolute; right: 40px; top: 1.5px; >.color__input < border-color: #aaa; border-block: 0 none rgba(0,0,0,0); border-collapse: collapse; border-inline: 0 none rgba(0,0,0,0); border-spacing: 0; border-style: solid; border-width: 1px; height: 36px; padding: 0; width: 280px; >.color__remove < background-color: var(--button-color-bg); border-color: var(--button-color-border); border-radius: 0 5px 5px 0; border-style: solid; border-width: 1px 1px 1px 0; display: inline-block; height: 34px; text-align: center; transition: background-color 200ms ease; width: 34px; >.color__remove:hover < background-color: #dbd1d3; >input[type=»color»]::-webkit-color-swatch-wrapper < padding: 0; >input[type=»color»]::-webkit-color-swatch

The app generates the CSS code for the animated gradient background and displays it inside the textarea. The «output» class is used for that textarea element. If you want to set the custom style for generated code, you can override the following styles.

The following are the CSS keyframes for the background movement. You can also define custom animation keyframes as per your requirements.

@keyframes animateBg-left < 0% < background-position: 0% 0%; >100% < background-position: 100% 0%; >> @keyframes animateBg-right < 0% < background-position: 100% 0%; >100% < background-position: 0% 0%; >> @keyframes animateBg-up < 0% < background-position: 0% 0%; >100% < background-position: 0% 100%; >> @keyframes animateBg-down < 0% < background-position: 0% 100%; >100% < background-position: 0% 0%; >>

That’s all! hopefully, you have successfully integrated this gradient generator project in your website/app. If you have any questions or suggestions, let me know by comment below.

Источник

Animated CSS Background

With this tool you can quickly create and customize animated CSS backgrounds for your website. It includes a total of three different background generators.

Bokeh effect animation background

The first animated CSS background is taken from Louis Hoebregts Codepen. It consists of blurry bubbles of one or multiple colors moving in circular shapes. You can adjust the speed, the size and the colors of the bubbles that move around. Afterward you can easily copy the HTML and the CSS and insert it anywhere on your website. For each bubble a span is inserted into the dom. Each of them are then positioned randomly. Afterwards they are animated based on the speed variable defined by you.

Pure CSS animation background

The second one of the animated CSS backgrounds is inspired by Mohammad Abdul Mohaimans Codepen. This one has spinning rectangles that move up and turn into circles. Here you can adjust the count of the rectangles, the speed, the size and the color as well. In this case every rectangle is added as a list item to an unordered list. They are positioned randomly on the X-Axis and move up after different delays.

Rectangle animate background CSS

The last animated background generator is by Bjorns Codepen. It has cubes that are spinning and growing until they fade. You can adjust the count and the size as well as the color of the cubes. The cubes are positioned randomly on the screen and have different shades of the given background color. In the HTML they are also added as list items.

Источник

CSS Animated Gradient Background Generator

What is a CSS Animated Gradient Background Generator, and why should I bookmark it?

CSS Animated Gradient Background Generator is a free online tool for web developers to generate CSS-based multi-colored animated backgrounds that looks very soothing and attention-grabbing.

It is recommended to bookmark it on your web browsers to quickly revisit and reuse it when needed for better productivity at work.

Please share these tools with your friends and colleagues. Also, it will be great if you can recommend these tools in your blogs if you have one. Thank You 🙂

How to use this tool?

Follow these simple steps to get the best results with this tool.

• Step 1 — In the setting panel, click on the preset you desire or just add your color by clicking «Add Color». You can select more than one color according to your needs.
• Step 2 — click on the color to adjust it to whatever you desire or you can choose to delete it by clicking on to cross button at the end of every color.
• Step 3 — Select your «Duration» in seconds increase or decrease it according to your needs.
• Step 4 — Choose the direction of the gradient flow from left, right, top, and down.
• Step 5 — After you are satisfied with the animated gradient, click and copy the CSS files generated to your clipboard and apply them to your CSS file.

Now, save this tool or bookmark it on your web browser to revisit it quickly when needed. Thank you!

webdevpuneet.com © 2021 | hosted by Bluehost (web hosting)

Источник

Keyframe Animation

CSS animations allow you to gradually change an element from one style to another. Animations consist of two parts: 1) a style describing the CSS animation and 2) a set of keyframes that mark the start and end states of the animation’s style. With some creativity, many animations can be done entirely in CSS. without any JavaScript!

• Simple to use and require no JavaScript knowledge.
• Much better performance, even under moderate system load.
• Allowing the browser to control the animation lets it optimize performance. For example, minimizing update frequency or pausing the animations running in tabs that aren’t open.

@keyframes

• If your animation runs smoothly from the start to the end, you can use the from and to values.
• If your animation varies from start to finish, like a bounce effect, use a percentage value (this is the value type our generator uses).

animation property

animation: name duration timing-function delay iteration-count direction fill-mode

name

duration

Total length of time that the animation takes to complete one cycle.

timing-function

How an animation progresses through the duration of each cycle.

delay

Delay between the time the element is loaded and the beginning of the animation.

iteration-count

Number of times the animation will repeat, or infinite for looping animations.

direction

Whether or not the animation should alternate directions through the sequence or reset to the starting point.

fill-mode

How an animation applies styles to its target before and after its execution.

Источник