How to Insert a Gradient Background Using PHP
Cascading Style Sheet (CSS) code is capable of generating gradient backgrounds on Web pages. Considering that it is possible to mix PHP in with CSS code, as long as the CSS is located within the PHP file, you can use PHP to generate gradients based on a form. The form will get the gradient's settings and send it to the page where you want the gradient background to appear. Replacing sections of the CSS with PHP to output the form values, the PHP will create the desired gradient.
Other People Are Reading
Instructions
-
-
1
Create a form to take in the values for the gradient. At a bare minimum, you need a starting point for the gradient, one starting color and one ending color. To test this form, you also need to set up a blank box on the page where the gradient will display. Add this HTML code to a Web page:
<form action=”gradient_maker.php” method=”post”>
Degree: <input type=”text” name=”degree” />
Start Color: <input type=”text” name=”start” />
End Color: <input type=”text” name=”end” />
<input type=”submit” name=”submit” value=”submit” />
</form>
<div id=”preview”></div>Change “gradient_maker.php” to the file name of the Web page where you put this code. Doing this will make the form post to the page that it is on, rather than a different page.
-
2
Find the “<style>” tags on your Web page or add a pair. These are always located between the “<head>” tags. Set up your preview box by giving the empty div on the page a width, height and border:
#preview {
width: 300px; height: 300px;
border: 1px solid #cccccc;
} -
-
3
Get the form values within the style rule, but only if the form was already submitted by the user:
#preview {
width: 300px; height: 300px;
border: 1px solid #cccccc;
<?php if(isset($_POST['submit'])) : ?>
<?php endif; ?>
}The “isset()” function in this PHP conditional statement checks whether the form was sent, by checking for the value of the “Submit” button. If “isset()” finds that value, then the script can try to bring in values from the form and plug them in to some CSS.
-
4
Write some basic gradient syntax. Set the gradient as a background image, using a linear gradient with a degree, start color and end color. The degree will tell the gradient where to start:
#preview {
width: 300px; height: 300px;
border: 1px solid #cccccc;
<?php if(isset($_POST['submit'])) : ?>
background-image: linear-gradient(deg, start color, end color);
<?php endif; ?>
} -
5
Add in the syntax for gradients required by each browser. Webkit-based browsers – Chrome and Safari – use a prefix of “-webkit,” and Firefox uses “-moz.”
#preview {
width: 300px; height: 300px;
border: 1px solid #cccccc;
<?php if(isset($_POST['submit'])) : ?>
background-image: linear-gradient(deg, start color, end color);
background-image: -webkit-linear-gradient(deg, start color, end color);
background-image: -moz-linear-gradient(deg, start color, end color);
<?php endif; ?>
} -
6
Place this code in front of “deg” inside each line of gradient code:
background-image: linear-gradient(<?php echo $_POST['degree']; ?>deg, start color, end color);
-
7
Replace each instance of “start color” and “end color” with their relevant values from the form:
background-image: linear-gradient(<?php echo $_POST['degree']; ?>deg, <?php echo $_POST['start']; ?>, <?php echo $_POST['end']; ?>);
Load the page in a browser and try out the form. When you right-click the page and view the source code, you will find plain CSS output creating the gradients based on values you submit.
-
1
Tips & Warnings
Gradients can take more than the three values discussed. Become familiar with how gradients work and add extra fields to your form to generate more complex gradients.
Make sure the Web page where you place this form has a PHP extension. If it does not, go to “Save As” in your editor and save it as a PHP file.
You must test PHP scripts on Web servers. This means uploading to your Web hosting account online or testing on your computer using a test server. WampServer and XAMPP are two test server packages that work well on Windows, and MAMPP works well on a Mac OS.
